/**
 * Living Proof Membership — Custom CSS
 * Place in wp-content/mu-plugins/ alongside livingproof-membership.php
 *
 * MATCHED TO: livingproofnewyork.com live site (Feb 2026)
 * - Black/white editorial palette
 * - System sans-serif typography (inherits from Elementor global)
 * - Minimal, photography-forward design
 * - Existing button style: #000 bg, white text, slight padding
 */


/* ==========================================================================
   iOS SAFARI 100vh FIX
   Safari counts 100vh including area behind browser chrome, hiding bottom content.
   100dvh (dynamic viewport height) accounts for the visible viewport only.
   ========================================================================== */
.elementor-section-height-full {
    min-height: 100dvh !important;
}


/* ==========================================================================
   ELEMENTOR ACCENT COLOR OVERRIDE
   Elementor's global accent defaults to pink. Override to black site-wide.
   ========================================================================== */
:root {
    --e-global-color-accent: #000 !important;
    --swiper-navigation-color: #000 !important;
    --swiper-theme-color: #000 !important;
}
.elementor-button,
.elementor-swiper-button,
.elementor-swiper-button-next,
.elementor-swiper-button-prev,
.swiper-button-next,
.swiper-button-prev {
    background-color: #000 !important;
    color: #fff !important;
}
.elementor-button:hover,
.elementor-swiper-button:hover,
.elementor-swiper-button-next:hover,
.elementor-swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #333 !important;
}

/* ==========================================================================
   MEMBERPRESS GUEST LAYOUT OVERRIDE
   MemberPress ReadyLaunch applies a dark blue overlay (#06429E) and custom
   template to login, registration, and forgot-password pages. Disable it
   so these pages use the normal Elementor/site theme instead.
   ========================================================================== */

body.mepr-guest-layout {
    background: none !important;
}

/* Remove ReadyLaunch wrapper styling that conflicts with site theme */
body.mepr-guest-layout #mepr-guest-content-wrapper,
body.mepr-guest-layout .mepr-guest-layout-wrapper {
    all: unset !important;
    display: block !important;
}

/* Hide Elementor popup overlay on MemberPress app-layout pages.
   Popup #739 triggers on page load and breaks on the custom template.
   Elementor JS sets inline display at runtime, so we nuke visibility,
   dimensions, and pointer-events as a belt-and-suspenders approach. */
body.mepr-app-layout .elementor-location-popup,
body.mepr-pro-template .elementor-location-popup,
body.mepr-app-layout .elementor-popup-modal,
body.mepr-pro-template .elementor-popup-modal,
body.single-memberpressproduct .elementor-location-popup,
body.single-memberpressproduct .elementor-popup-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: fixed !important;
    left: -9999px !important;
    top: -9999px !important;
}


/* ==========================================================================
   MEMBERPRESS GLOBAL FORM STYLES
   Applies Living Proof aesthetic to all MemberPress forms:
   login, registration, forgot password, account.
   ========================================================================== */

/* --- Layout wrapper --- */
.mp_wrapper {
    font-family: 'Onest', sans-serif;
}

/* Hide spacers */
.mp_wrapper .mepr_spacer,
.mp_wrapper .mp-spacer {
    display: none;
}

/* --- Labels --- */
.mp_wrapper .mp-form-label label,
.mp_wrapper .mp-form-row > label {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin-bottom: 6px;
}

/* --- Inputs --- */
.mp_wrapper input[type="text"].mepr-form-input,
.mp_wrapper input[type="email"].mepr-form-input,
.mp_wrapper input[type="password"].mepr-form-input,
.mp_wrapper input[type="tel"].mepr-form-input,
.mp_wrapper input.mepr-form-input,
.mp_wrapper .mp-form-row input[type="text"],
.mp_wrapper .mp-form-row input[type="email"],
.mp_wrapper .mp-form-row input[type="password"],
.mp_wrapper select.mepr-form-input,
.mp_wrapper .mp-form-row select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    border-radius: 0;
    -webkit-appearance: none;
}

.mp_wrapper input.mepr-form-input:focus,
.mp_wrapper .mp-form-row input:focus,
.mp_wrapper select.mepr-form-input:focus,
.mp_wrapper .mp-form-row select:focus {
    outline: none;
    border-color: #000;
}

/* Select dropdown arrow */
.mp_wrapper select.mepr-form-input,
.mp_wrapper .mp-form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* --- Form rows spacing --- */
.mp_wrapper .mp-form-row {
    margin-bottom: 1.25rem;
}

/* --- Password toggle button --- */
.mp_wrapper .mp-hide-pw {
    position: relative;
}

.mp_wrapper .mp-hide-pw input {
    padding-right: 44px;
}

.mp_wrapper .mp-hide-pw button.mp-hide-pw {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp_wrapper .mp-hide-pw button.mp-hide-pw:hover {
    color: #000;
}

/* --- Validation errors (hidden by default, shown by MemberPress JS) --- */
.mp_wrapper .cc-error {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    color: #991b1b;
    margin-left: 0.5rem;
}

/* Error messages */
.mp_wrapper .mepr_error {
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* Forgot-password page: MemberPress reuses .mepr_error for the
   "Check your email" success message, which looks alarming in red.
   Neutralize it on page 1954 only — real errors on other pages stay red. */
body.page-id-1954 .mp_wrapper .mepr_error {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    color: #111 !important;
}

/* Success messages */
.mp_wrapper .cc-success {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    color: #16a34a;
    margin-left: 0.5rem;
}

/* has_errors inline message */
.mp_wrapper .mepr-form-has-errors {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #991b1b;
    margin-left: 0.75rem;
}

/* --- Submit buttons — Elementor nuke pattern --- */
.mp_wrapper input[type="submit"].mepr-submit,
.mp_wrapper input[type="submit"].mepr-share-button,
.mp_wrapper input[type="submit"].button-primary,
.mp_wrapper .mp-form-submit input[type="submit"] {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 12px 32px;
    background: #000;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mp_wrapper input[type="submit"]:hover {
    background: #333;
}

/* Loading gif */
.mp_wrapper .mepr-loading-gif {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* --- Checkbox + remember me --- */
.mp_wrapper label[for="rememberme"],
.mp_wrapper .mepr_tos label,
.mp_wrapper label.mepr-checkbox-field {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.mp_wrapper input[type="checkbox"] {
    accent-color: #000;
}

/* --- Links --- */
.mp_wrapper a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-family: 'Onest', sans-serif;
}

.mp_wrapper a:hover {
    color: #555;
}

/* --- Login form specifics --- */
.mp_login_form .mepr-login-actions {
    margin-top: 1rem;
}

.mp_login_form .mepr-login-actions a {
    font-size: 0.8rem;
    color: #666;
}

.mp_login_form .mepr-login-actions a:hover {
    color: #000;
}

/* Already logged in message */
.mp_wrapper .mepr-already-logged-in {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #333;
    padding: 1rem 0;
}

/* --- Registration/checkout form specifics --- */

/* Pricing row */
.mp_wrapper .mepr_price {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.mp_wrapper .mepr_price_cell_label {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}

.mp_wrapper .mepr_price_cell {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #000;
}

/* Invoice/price table inside checkout */
.mp_wrapper .mepr_price_cell table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
}

.mp_wrapper .mepr_price_cell table th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.mp_wrapper .mepr_price_cell table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
}

/* Coupon link */
.mp_wrapper .have-coupon-link {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #666;
    display: inline-block;
    margin-bottom: 1rem;
}

.mp_wrapper .have-coupon-link:hover {
    color: #000;
}

/* Payment methods wrapper */
.mp_wrapper .mepr-payment-methods-wrapper {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid #e0e0e0;
}

.mp_wrapper .mepr-payment-methods-wrapper label {
    text-transform: none;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Stripe card element */
.mp_wrapper #card-element,
.mp_wrapper .mepr-stripe-card-element {
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    transition: border-color 0.2s ease;
}

.mp_wrapper #card-element:focus-within,
.mp_wrapper .mepr-stripe-card-element:focus-within {
    border-color: #000;
}

/* --- Forgot password specifics --- */
#mepr_forgot_password_form h3,
.mp_wrapper h3 {
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #000;
    margin: 0 0 1.25rem;
}

/* --- Change password form --- */
.mp_wrapper .mepr-newpassword-form {
    max-width: 480px;
}

.mp_wrapper .mepr-newpassword-form .mepr-submit {
    margin-right: 0.75rem;
}

/* "or Cancel" text inline with submit */
.mp_wrapper .mepr-newpassword-form .mepr-submit + * {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

.mp_wrapper .mepr-newpassword-form a {
    font-size: 0.8rem;
    color: #666;
}

.mp_wrapper .mepr-newpassword-form a:hover {
    color: #000;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .mp_wrapper .mepr_price {
        flex-direction: column;
        gap: 0.5rem;
    }

    .mp_wrapper input[type="submit"].mepr-submit,
    .mp_wrapper input[type="submit"].mepr-share-button,
    .mp_wrapper input[type="submit"].button-primary,
    .mp_wrapper .mp-form-submit input[type="submit"] {
        display: block;
        width: 100%;
        text-align: center;
    }

    .mp_wrapper .mepr-payment-methods-wrapper {
        padding: 1rem;
    }
}


/* ==========================================================================
   LOCKED CONTENT CTA
   Shown when MemberPress blocks content for non-members.
   ========================================================================== */

.lp-locked-content {
    max-width: 680px;
    margin: 0 auto;
}

.lp-locked-thumbnail {
    margin-bottom: 1.5rem;
}

.lp-locked-image {
    width: 100%;
    height: auto;
    opacity: 0.6;
}

.lp-locked-excerpt {
    margin-bottom: 1.5rem;
    color: #666;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
}

.lp-locked-cta {
    border: 1px solid #e0e0e0;
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 2rem 0;
}

.lp-locked-cta-inner {
    max-width: 420px;
    margin: 0 auto;
}

.lp-locked-cta h3 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lp-locked-cta p {
    margin: 0 0 1.5rem;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
}

.lp-cta-button {
    display: inline-block;
    background: #000;
    color: #fff !important;
    padding: 0.667em 1.333em;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.3s all ease;
}

.lp-cta-button:hover {
    background: #333;
}

.lp-login-prompt {
    margin-top: 1rem !important;
    font-size: 0.8rem !important;
    color: #999 !important;
}

.lp-login-prompt a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.lp-login-prompt a:hover {
    color: #333;
}


/* ==========================================================================
   CATEGORY BADGES
   Used in feed cards and post templates.
   ========================================================================== */

.lp-category-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1.5;
}

.lp-badge-members {
    background: #000;
}

.lp-badge-podcast {
    background: #000;
}

.lp-badge-video {
    background: #000;
}

.lp-badge-free {
    background: #666;
}

.lp-badge-feed {
    background: #333;
}


/* ==========================================================================
   AUDIO PLAYER
   For audio-only files served via Bunny Storage + CDN.
   ========================================================================== */

.lp-audio-wrapper {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid #e0e0e0;
}

.lp-audio-title {
    margin: 0 0 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
}

.lp-audio-wrapper audio {
    width: 100%;
}


/* ==========================================================================
   VIDEO PLAYER (Bunny Stream)
   Primary media element — video-first content (Radio, docs, Re-Ignition).
   ========================================================================== */

.lp-video-wrapper {
    margin: 1.5rem 0;
}

.lp-video-title {
    margin: 0 0 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
}

.lp-video-responsive {
    position: relative;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #000;
}

.lp-video-wrapper video {
    display: block;
    width: 100%;
}


/* ==========================================================================
   FOOTER — disable Elementor sticky bottom
   The footer template (ID 764) has sticky:bottom baked into data-settings.
   This override ensures it flows normally after page content.
   ========================================================================== */

.elementor-location-footer .e-con {
    position: relative !important;
}

/* Hide Elementor footer on homepage */
body.lp-home footer.site-footer,
body.lp-home .elementor-location-footer,
body.lp-home #colophon {
    display: none !important;
}


/* ==========================================================================
   MEMBERPRESS OVERRIDES
   Basic form/button overrides for MemberPress.
   ========================================================================== */

.mepr-submit {
    background: #000 !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 24px;
    border-radius: 50px;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.mepr-submit:hover {
    background: #333 !important;
}


/* ==========================================================================
   PRICING CARDS — [lp_pricing_cards]
   Image-dominant 3-card grid with click-to-flip interaction.
   Scoped via body.page-id-2016 and .lp-pricing-cards wrapper so nothing
   leaks to other pages.
   ========================================================================== */

/* Page-level and Elementor overrides (header, body bg, container flex)
   are now rendered inline from the shortcode <style> block for guaranteed
   source-order specificity. Only card visual styles remain here. */

/* --- Pricing cards wrapper ---
   Desktop target: whole pricing view fits in one viewport (no scroll).
   Padding is intentionally tight so the cards + free-CTA row sit inside
   the available space between .lp-header (fixed, 56px top) and the
   floating bottom nav. Mobile gets its own bottom padding for peek
   scroll in the @media block below. */
.lp-pricing-cards {
    position: relative;
    max-width: 1950px;
    margin: 0 auto;
    padding: 12px 16px 0;
    font-family: 'Onest', sans-serif;
    color: #fff;
}

/* --- Grid (desktop: 3 columns, no scroll) --- */
.lp-pc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* --- Card wrap (holds flippable card + tagline below) --- */
.lp-pc-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Card outer (holds the 3D perspective) --- */
/* Sizing is driven by inline padding-bottom: 154.5% (400:618 ratio)
   on the element. Only non-sizing props here. */
.lp-pc-card {
    perspective: 1200px;
    cursor: pointer;
    background: transparent;
}

/* --- Card inner (the flipping element) --- */
/* Must be position:absolute to fill the padding-bottom box of .lp-pc-card
   (which has height:0 + padding-bottom:154.5%). height:100% would be 0. */
.lp-pc-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.lp-pc-card-inner.flipped {
    transform: rotateY(180deg);
}

/* --- Front and back faces --- */
.lp-pc-card-front,
.lp-pc-card-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.lp-pc-card-back {
    transform: rotateY(180deg);
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    color: #d4d4d4;
    font-family: 'Onest', sans-serif;
}

/* --- Front face content --- */
/* Images are anchored to the BOTTOM of the card. When a source image is
   wider than the 1:1.5 card ratio, the crop happens at the top. This is a
   design rule: creators should frame key content so it reads in the bottom
   two-thirds of the source image. The tagline overlay at bottom is
   translucent, so whatever's at image-bottom shows through it. */
.lp-pc-front-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

/* Center price+title overlay removed — replaced by bottom strip below. */
.lp-pc-front-overlay { display: none !important; }

/* --- Bottom strip: quiet caption band matching the floating-nav
   typography. Title centered, price absolute-right. Lives inside
   .lp-pc-card-front so it rotates with the image and is culled
   naturally by the front face\'s backface-visibility: hidden.

   NO backdrop-filter: on iOS Safari, backdrop-filter promotes the
   element to its own compositor layer that escapes the parent face\'s
   3D cull, causing mirrored-text lag past 90deg during the back-flip.
   A plain semi-opaque background is enough for legibility over the
   image. */
.lp-pc-tagline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Onest', sans-serif;
    padding: 10px 18px;
    margin: 0;
    display: block;
    min-height: 36px;
}
.lp-pc-bottom-title {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    line-height: 1.3;
    text-align: center;
    /* Symmetric padding reserves room on BOTH sides for the
       absolutely-positioned price (~60px). This keeps the title\'s
       optical center aligned with the card\'s center. */
    padding: 0 60px;
    white-space: nowrap;
}
.lp-pc-bottom-price {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    line-height: 1.3;
    white-space: nowrap;
}

/* --- Back face content --- */
.lp-pc-back-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    text-align: center;
    font-family: 'Onest', sans-serif;
}

.lp-pc-back-body {
    flex: 1 1 auto;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #d4d4d4;
    font-family: 'Onest', sans-serif;
}

.lp-pc-back-body p,
.lp-pc-back-body div {
    color: #d4d4d4;
    font-family: 'Onest', sans-serif;
    margin: 0 0 8px;
}

.lp-pc-back-body strong {
    color: #fff;
    font-family: 'Onest', sans-serif;
}

.lp-pc-back-body ul {
    margin: 8px 0;
    padding-left: 18px;
    list-style: disc;
}

.lp-pc-back-body li {
    color: #d4d4d4;
    font-family: 'Onest', sans-serif;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

/* --- Join button (back face) --- */
.lp-pc-join {
    display: block;
    margin-top: 14px;
    padding: 14px 20px;
    background: #fff;
    color: #000;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 200ms ease, color 200ms ease;
    flex: 0 0 auto;
}

.lp-pc-join:hover {
    background: #d4d4d4;
    color: #000;
}

/* Hello Elementor + Elementor global accent apply a:hover / a:visited /
   a:focus rules that beat .lp-pc-join's base (0,1,0) specificity. Bump
   to (0,2,1) + !important on every link state per CLAUDE.md "Button /
   link specificity vs theme + Elementor defaults". */
.lp-pc-card-back .lp-pc-join,
.lp-pc-card-back .lp-pc-join:link,
.lp-pc-card-back .lp-pc-join:visited,
.lp-pc-card-back .lp-pc-join:hover,
.lp-pc-card-back .lp-pc-join:focus,
.lp-pc-card-back .lp-pc-join:active {
    text-decoration: none !important;
    color: #000 !important;
}
.lp-pc-card-back .lp-pc-join:hover { background: #d4d4d4 !important; }

/* --- Heading (only renders if shortcode heading attr is set) --- */
/* Free-tier CTA beneath the pricing grid. */
.lp-join-free {
    text-align: center;
    margin: 0.75rem auto 0;
    font-size: 0.9rem;
}
/* Lock link color across every state \u2014 theme / Elementor / browser
   defaults have been flipping :visited and :hover to blue. No
   underline: the CTA reads as plain centered white text. */
.lp-join-free a,
.lp-join-free a:link,
.lp-join-free a:visited,
.lp-join-free a:hover,
.lp-join-free a:focus,
.lp-join-free a:active {
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.lp-join-free a,
.lp-join-free a:link,
.lp-join-free a:visited {
    opacity: 0.75;
}
.lp-join-free a:hover,
.lp-join-free a:focus {
    opacity: 1;
}

.lp-pc-heading {
    text-align: center;
    font-family: 'Onest', sans-serif;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* --- Desktop sizing: cap card width so the whole pricing view
   (header + cards + free CTA + bottom nav) fits in one viewport,
   regardless of window width. Card height = width * 1.5 via the
   inline padding-bottom hack, so capping width caps height. The
   calc assumes ~130px of non-card chrome: header (56) + top pad
   (12) + gap to CTA (~12) + CTA line (~22) + nav clearance (~28). */
@media (min-width: 769px) {
    .lp-pc-card-wrap {
        width: 100%;
        max-width: calc((100vh - 130px) / 1.5);
        margin: 0 auto;
    }
}

/* --- Tablet: still 3 columns but tighter gaps --- */
@media (max-width: 1024px) {
    .lp-pricing-cards {
        padding: 12px 16px 0;
    }
    .lp-pc-grid {
        gap: 14px;
    }
    .lp-pc-bottom-title {
        font-size: 0.72rem;
    }
    .lp-pc-bottom-price {
        font-size: 0.72rem;
    }
}

/* --- Mobile: single column, vertical scroll, peek via JS-set min-height --- */
@media (max-width: 768px) {
    .lp-pricing-cards {
        max-width: 100%;
        padding: 16px 16px 40px;
    }
    .lp-pc-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .lp-pc-bottom-title {
        font-size: 0.9rem;
    }
    .lp-pc-bottom-price {
        font-size: 0.9rem;
    }
    .lp-pc-back-body {
        font-size: 0.95rem;
    }
    .lp-pc-join {
        font-size: 1rem;
        padding: 16px 20px;
    }
}

@media (max-width: 420px) {
    .lp-pc-bottom-title {
        font-size: 0.8rem;
    }
    .lp-pc-bottom-price {
        font-size: 0.8rem;
    }
}

/* Login form */
.mepr-login-form input[type="submit"] {
    background: #000;
    border: none;
    color: #fff;
    padding: 0.667em 1.333em;
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.3s all ease;
}

.mepr-login-form input[type="submit"]:hover {
    background: #333;
}


/* ==========================================================================
   WPDISCUZ OVERRIDES
   Minimal tweaks to match the editorial style.
   ========================================================================== */

#wpdiscuz .wpd-comment-text {
    font-size: 0.9rem;
    line-height: 1.6;
}

#wpdiscuz .wc-form-footer .wc-submit {
    background: #000 !important;
    border: none !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#wpdiscuz .wc-form-footer .wc-submit:hover {
    background: #333 !important;
}


/* ==========================================================================
   MEMBERS FEED — [lp_members_feed]
   Tab filters, discussion layout (Feed), grid layout (all other tabs),
   placeholder thumbnails, Load More button, responsive breakpoints.
   ========================================================================== */

/* --- Wrapper --- */
.lp-members-feed {
    width: 100%;
}

/* --- Tab filters --- */
.lp-feed-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.lp-feed-filters button {
    position: relative;
    padding: 0.35rem 0.9rem;
    border: 1px solid #e0e0e0;
    background: transparent;
    color: #999;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: 0.3s all ease;
}

/* Messages tab unread badge — only emitted when count > 0
   (server-rendered; replaces broken [better_messages_unread_counter]
   embed whose wrapper HTML survived hide_zero=1). */
.lp-tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e63946;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px #fff;
}

.lp-feed-filters button:hover,
.lp-feed-filters button.active {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* --- Search bar (non-Feed tabs) --- */
.lp-feed-search {
    margin-bottom: 1.5rem;
}

.lp-feed-search__input {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: lowercase;
    color: #000;
    outline: none;
    transition: border-color 0.2s ease;
}

.lp-feed-search__input::placeholder {
    color: #999;
}

.lp-feed-search__input:focus {
    border-color: #000;
}

/* --- Post container transition --- */
.lp-feed-posts {
    transition: opacity 0.2s ease;
}

.lp-feed-item__title {
    margin: 0 0 0.125rem;
    font-family: 'Onest', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.15;
}

.lp-feed-item__title a {
    color: #000;
    text-decoration: none;
}

.lp-feed-item__title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.lp-feed-item__date {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.lp-feed-item__excerpt {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* --- Grid layout (all other tabs) — 3 columns --- */
.lp-feed-posts[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.lp-feed-item--grid {
    display: flex;
    flex-direction: column;
}

.lp-feed-item--grid .lp-feed-item__thumb-link {
    display: block;
    margin-bottom: 0.75rem;
    overflow: hidden; /* Pass 2: crop transform:scale() into the cell */
}

.lp-feed-item--grid .lp-feed-item__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.lp-feed-item--grid .lp-feed-item__title {
    font-size: 0.95rem;
}

.lp-feed-item--grid .lp-feed-item__date {
    font-size: 0.75rem;
    margin-bottom: 0;
}

/* --- Placeholder thumbnail (no image, e.g. Radio episodes) --- */
.lp-feed-item__thumb--placeholder {
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.lp-feed-item__thumb--placeholder svg {
    width: 32px;
    height: 32px;
}

/* --- Empty state --- */
.lp-feed-empty {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #999;
    text-align: center;
    padding: 3rem 0;
}

/* --- Load More button --- */
.lp-load-more-wrap {
    text-align: center;
    padding: 2rem 0 0;
}

.lp-load-more {
    display: inline-block;
    padding: 0.667em 2em;
    background: #000;
    color: #fff;
    border: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease;
}

.lp-load-more:hover {
    background: #333;
}

.lp-load-more:disabled {
    background: #999;
    cursor: not-allowed;
}

/* --- Responsive: grid → 2 cols on tablet --- */
@media (max-width: 1024px) {
    .lp-feed-posts[data-view="grid"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Responsive: grid → 1 col on mobile, feed adjustments --- */
@media (max-width: 600px) {
    .lp-feed-posts[data-view="grid"] {
        grid-template-columns: 1fr;
    }

    .lp-feed-item__title {
        font-size: 1rem;
    }

    .lp-feed-item--grid .lp-feed-item__title {
        font-size: 0.9rem;
    }

    .lp-feed-filters {
        gap: 0.35rem;
    }

    .lp-feed-filters button {
        font-size: 0.7rem;
        padding: 0.3rem 0.7rem;
    }

    .lp-feed-search__input {
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
    }
}


/* ==========================================================================
   STREAM LAYOUT — Feed tab global stream (Patreon-style)
   Single-column feed with inline media, truncated text, gradient fade.
   ========================================================================== */

/* --- Stream container --- */
.lp-feed-posts[data-view="stream"] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Individual stream item --- */
.lp-stream-item {
    padding: 1.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.lp-stream-item:first-child {
    padding-top: 0;
}

/* --- Hero media (video/audio/image) --- */
.lp-stream-item__hero {
    margin-bottom: 1rem;
    overflow: hidden; /* Pass 2: crop transform:scale() into the cell */
}

/* Behavior D — paid + video stream items render a bare Bunny iframe inline
   (no LP poster, no LP play button). Provide the same 16:9 framing the JS
   --playing swap previously did, so the iframe is sized on initial paint. */
.lp-stream-item__hero--video-paid {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
}
.lp-stream-item__hero--video-paid .lp-stream-item__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.lp-stream-item__hero .lp-video-wrapper {
    margin: 0;
}

.lp-stream-item__hero .lp-audio-wrapper {
    margin: 0;
}

.lp-stream-item__hero-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* --- Header: badge + date --- */
.lp-stream-item__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lp-stream-item__date {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

/* --- Title --- */
.lp-stream-item__title {
    margin: 0 0 0.25rem;
    font-family: 'Onest', sans-serif;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
}

/* --- Truncated text content --- */
.lp-stream-content {
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 0.75rem;
}

.lp-stream-content p {
    margin: 0 0 0.75rem;
}

.lp-stream-content p:last-child {
    margin-bottom: 0;
}

.lp-stream-content--truncated {
    position: relative;
    max-height: 250px;
    overflow: hidden;
}

.lp-stream-content--truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

/* --- View post link --- */
.lp-stream-viewpost {
    display: inline-block;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    margin-top: 0.5rem;
}

.lp-stream-viewpost:hover {
    color: #555;
}

/* --- Footer: comment count --- */
.lp-stream-item__footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

.lp-stream-comment-icon {
    flex-shrink: 0;
    color: #999;
}

/* --- Stream responsive --- */
@media (max-width: 600px) {
    .lp-stream-item {
        padding: 1.25rem 0;
    }

    .lp-stream-item__title {
        font-size: 1.0625rem;
    }

    .lp-stream-content {
        font-size: 0.9rem;
    }

    .lp-stream-content--truncated {
        max-height: 200px;
    }
}


/* COMPOSER v1 namespace deleted in composer-edit-create-v2.
   See takeover block at the end of this file for v2 styles. */

.lp-upload-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
}

.lp-upload-bar__name {
    flex: 0 0 auto;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.lp-upload-bar__track {
    flex: 1;
    height: 4px;
    background: #e0e0e0;
    overflow: hidden;
}

.lp-upload-bar__fill {
    height: 100%;
    width: 0%;
    background: #000;
    transition: width 0.2s ease;
}

.lp-upload-bar--complete .lp-upload-bar__fill {
    background: #16a34a;
}

.lp-upload-bar--error .lp-upload-bar__fill {
    background: #dc2626;
}

.lp-upload-bar__pct {
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
    color: #666;
    font-variant-numeric: tabular-nums;
}

.lp-upload-bar--complete .lp-upload-bar__pct {
    color: #16a34a;
}

.lp-upload-bar--error .lp-upload-bar__pct {
    color: #dc2626;
}

.lp-upload-bar__cancel {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.lp-upload-bar__cancel:hover {
    color: #000;
}

.lp-upload-bar--complete .lp-upload-bar__cancel {
    display: none;
}

@media (max-width: 600px) {
    .lp-upload-bar__name {
        max-width: 120px;
    }
}


/* ==========================================================================
   CONDITIONAL NAV ITEMS
   "Messages" link hidden for non-logged-in visitors.
   Add CSS class "lp-logged-in-only" to the menu item in Appearance → Menus.
   ========================================================================== */

.lp-logged-in-only {
    display: none;
}

body.logged-in .lp-logged-in-only {
    display: inline-block;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
    .lp-locked-cta {
        padding: 1.5rem 1rem;
    }

    .lp-cta-button {
        display: block;
        text-align: center;
    }
}


/* ==========================================================================
   GIFT MEMBERSHIP — /gift/, /gift/success/, /gift/redeem/
   ========================================================================== */

/* --- Gift form page: two-column layout --- */
.lp-gift-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    align-items: start;
}

/* Left: preview card */
.lp-gift-preview {
    position: sticky;
    top: 120px;
}

.lp-gift-preview-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 3 / 4;
}

.lp-gift-preview-image {
    position: absolute;
    inset: 0;
}

.lp-gift-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.lp-gift-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 24px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
}

.lp-gift-preview-badge {
    display: inline-block;
    padding: 4px 14px;
    background: #fff;
    color: #000;
    font-family: 'Onest', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.lp-gift-preview-tier {
    font-family: 'Onest', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.lp-gift-preview-duration {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

/* Right: form */
.lp-gift-form-wrap {
    padding-top: 8px;
}

.lp-gift-form-heading {
    font-family: 'Onest', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.lp-gift-form-subheading {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 28px;
}

.lp-gift-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-gift-field label {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin-bottom: 6px;
}

.lp-gift-field input[type="text"],
.lp-gift-field input[type="email"],
.lp-gift-field input[type="password"],
.lp-gift-field select,
.lp-gift-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #000;
    background: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.lp-gift-field input:focus,
.lp-gift-field select:focus,
.lp-gift-field textarea:focus {
    outline: none;
    border-color: #000;
}

.lp-gift-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Duration radio group */
.lp-gift-duration-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.lp-gift-duration-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
    font-family: 'Onest', sans-serif;
}

.lp-gift-duration-option:last-child {
    border-bottom: none;
}

.lp-gift-duration-option:hover {
    background: #f9f9f9;
}

.lp-gift-duration-option.active {
    background: #f5f5f5;
}

.lp-gift-duration-option input[type="radio"] {
    display: none;
}

.lp-gift-duration-label {
    font-size: 0.9rem;
    color: #000;
    font-weight: 500;
}

.lp-gift-duration-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
}

/* Message toggle */
.lp-gift-message-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.lp-gift-message-toggle:hover {
    color: #000;
}

.lp-gift-message-wrap {
    margin-top: 8px;
}

/* Error message */
.lp-gift-error {
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
}

.lp-gift-error a {
    color: #991b1b;
    font-weight: 600;
}

/* Submit button */
.lp-gift-submit {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #000;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease;
    box-sizing: border-box;
}

.lp-gift-submit:hover {
    background: #333;
}

.lp-gift-submit:disabled {
    background: #999;
    cursor: not-allowed;
}

/* Login prompt */
.lp-gift-login-prompt {
    text-align: center;
    margin-top: 12px;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

.lp-gift-login-prompt a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}


/* --- Gift success page --- */
.lp-gift-success {
    max-width: 520px;
    margin: 60px auto;
    padding: 0 20px;
}

.lp-gift-success-card {
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 48px 32px;
}

.lp-gift-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.lp-gift-success-card h2 {
    font-family: 'Onest', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px;
}

.lp-gift-success-detail {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
    margin: 0 0 8px;
}

.lp-gift-success-note {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
    margin: 0 0 24px;
}

.lp-gift-success-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #000;
    color: #fff !important;
    border-radius: 50px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.3s ease;
}

.lp-gift-success-btn:hover {
    background: #333;
}


/* --- Gift redemption page --- */
.lp-gift-redeem {
    max-width: 480px;
    margin: 60px auto;
    padding: 0 20px;
}

.lp-gift-redeem-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 40px 32px;
}

.lp-gift-redeem-card h2 {
    font-family: 'Onest', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px;
}

.lp-gift-redeem-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
}

.lp-gift-redeem-header .lp-gift-preview-badge {
    margin-bottom: 16px;
}

.lp-gift-redeem-detail {
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    color: #333;
    margin: 4px 0 0;
}

.lp-gift-redeem-message {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: #f9f9f9;
    border-left: 3px solid #000;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: #333;
    line-height: 1.5;
}

.lp-gift-redeem-cta {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 16px;
}

/* Code entry form on /gift/redeem/ (no code in URL) */
.lp-gift-redeem-code-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.lp-gift-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-sizing: border-box;
}

.lp-gift-input:focus {
    outline: none;
    border-color: #000;
}


/* --- Responsive: stack on mobile --- */
@media (max-width: 768px) {
    .lp-gift-page {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px 16px 40px;
    }

    .lp-gift-preview {
        position: static;
    }

    .lp-gift-preview-card {
        aspect-ratio: 16 / 9;
    }

    .lp-gift-form-heading {
        font-size: 1.3rem;
    }

    .lp-gift-success {
        margin: 40px auto;
    }

    .lp-gift-success-card {
        padding: 32px 20px;
    }

    .lp-gift-redeem {
        margin: 40px auto;
    }

    .lp-gift-redeem-card {
        padding: 28px 20px;
    }
}


/* ==========================================================================
   14. Single Post — Article Body
   ========================================================================== */

/* Paragraphs */
.elementor-widget-theme-post-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Links inside post content */
.elementor-widget-theme-post-content a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.elementor-widget-theme-post-content a:hover {
    color: #555;
}

/* Dividers */
.elementor-widget-theme-post-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2.5rem 0;
}

/* Blockquotes */
.elementor-widget-theme-post-content blockquote {
    border-left: 3px solid #000;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #555;
}

/* Lists */
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    color: #333;
    line-height: 1.8;
}

.elementor-widget-theme-post-content li {
    margin-bottom: 0.5rem;
}

/* Inline images */
.elementor-widget-theme-post-content figure {
    margin: 2rem 0;
    padding: 0;
}

.elementor-widget-theme-post-content figure img,
.elementor-widget-theme-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.elementor-widget-theme-post-content figcaption {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.5rem;
    text-align: center;
}

.elementor-widget-theme-post-content > figure:first-child {
    margin-top: 0;
}


/* ==========================================================================
   FEATURED IMAGE FALLBACK (lp_thumbnail meta)
   Renders Bunny CDN thumbnail when no WordPress media attachment exists.
   Matches native Elementor Featured Image widget styling.
   ========================================================================== */

.lp-thumbnail-fallback {
    width: 100%;
    height: auto;
    display: block;
}

/* Text alignment classes (from ProseMirror import) */
.has-text-align-center {
    text-align: center;
}

.has-text-align-right {
    text-align: right;
}


/* ==========================================================================
   MESSAGES TAB — Better Messages Integration
   Embedded inside [lp_members_feed] as the Messages tab.
   ========================================================================== */

/* Unread badge on Messages tab button */
.lp-messages-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    vertical-align: middle;
}

/* Hide badge when empty (Better Messages outputs empty span when zero) */
.lp-messages-badge:empty {
    display: none;
}

/* Messages pane container */
#lp-messages-pane {
    min-height: 500px;
}

/* "Message Living Proof" button wrapper */
.lp-messages-dm-btn {
    margin-bottom: 1.5rem;
}

.lp-messages-dm-btn a {
    display: inline-block;
    background: #000;
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.3s ease;
}

.lp-messages-dm-btn a:hover {
    background: #333;
}

/* Better Messages container — fill the feed width */
#lp-messages-pane .bp-messages-wrap,
#lp-messages-pane .bm-chat-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* Responsive: give Better Messages enough height on mobile */
@media (max-width: 768px) {
    #lp-messages-pane {
        min-height: 400px;
    }
}


/* ==========================================================================
   MEMBERS PAGE — Login Gate (logged-out view)
   Shown in place of the feed when visitor is not logged in.
   ========================================================================== */

.lp-members-login-gate {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 0;
}

.lp-login-gate__heading {
    font-family: 'Onest', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin: 0 0 1.5rem;
    text-align: center;
}

/* MemberPress login form overrides */
.lp-login-gate__form .mepr-login-form label,
.lp-login-gate__form .mp-form-label {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin-bottom: 6px;
}

.lp-login-gate__form .mepr-login-form input[type="text"],
.lp-login-gate__form .mepr-login-form input[type="email"],
.lp-login-gate__form .mepr-login-form input[type="password"],
.lp-login-gate__form input.mepr-form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.lp-login-gate__form .mepr-login-form input[type="text"]:focus,
.lp-login-gate__form .mepr-login-form input[type="email"]:focus,
.lp-login-gate__form .mepr-login-form input[type="password"]:focus,
.lp-login-gate__form input.mepr-form-input:focus {
    outline: none;
    border-color: #000;
}

/* Submit button — Elementor nuke */
.lp-login-gate__form .mepr-login-form input[type="submit"],
.lp-login-gate__form .mepr-login-form button[type="submit"],
.lp-login-gate__form .mepr-submit {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 0.75rem;
}

.lp-login-gate__form .mepr-login-form input[type="submit"]:hover,
.lp-login-gate__form .mepr-login-form button[type="submit"]:hover,
.lp-login-gate__form .mepr-submit:hover {
    background: #333;
}

/* Error messages */
.lp-login-gate__form .mepr_error,
.lp-login-gate__form .mepr-login-form .mepr_error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* Forgot password link */
.lp-login-gate__form .mepr-login-form a,
.lp-login-gate__form a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
}

.lp-login-gate__form .mepr-login-form a:hover,
.lp-login-gate__form a:hover {
    color: #555;
}

/* Remember me checkbox */
.lp-login-gate__form .mp-form-row.mepr_remember_me {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #666;
}

/* Hide empty MemberPress CAPTCHA / error containers */
.lp-login-gate__form .mepr-captcha-wrap:empty,
.lp-login-gate__form .g-recaptcha:empty,
.lp-login-gate__form .mepr_spacer,
.lp-login-gate__form iframe[title="reCAPTCHA"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* "or" divider */
.lp-login-gate__divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.lp-login-gate__divider::before,
.lp-login-gate__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.lp-login-gate__divider span {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #999;
    text-transform: lowercase;
}

/* Sign-up CTA cards — two equal cards */
.lp-login-gate__signup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lp-login-gate__card {
    border: 1px solid #e0e0e0;
    padding: 2rem;
    text-align: center;
}

.lp-login-gate__card h3 {
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin: 0 0 0.5rem;
}

.lp-login-gate__card p {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

/* Outline button variant for free tier */
.lp-cta-button.lp-cta-button--outline {
    background: transparent;
    color: #000 !important;
    border: 1px solid #000;
}

.lp-cta-button.lp-cta-button--outline:hover {
    background: #000;
    color: #fff !important;
}

/* Login gate responsive */
@media (max-width: 600px) {
    .lp-members-login-gate {
        padding: 1rem 0;
    }

    .lp-login-gate__card {
        padding: 1.5rem 1rem;
    }
}


/* ==========================================================================
   MEMBERS PAGE — Account Pane (MemberPress account overrides)
   Rendered inside [lp_members_feed] as the Account tab.
   Vertical sidebar nav + content layout.
   ========================================================================== */

#lp-account-pane {
    min-height: 300px;
    padding-top: 0.5rem;
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

/* --- Sidebar nav (left) --- */
#lp-account-pane #mepr-account-nav {
    flex: 0 0 180px;
    position: sticky;
    top: 120px;
}

#lp-account-pane #mepr-account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

#lp-account-pane #mepr-account-nav li.mepr-nav-item {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

#lp-account-pane #mepr-account-nav li.mepr-nav-item:last-child {
    border-bottom: none;
}

#lp-account-pane #mepr-account-nav a {
    all: unset;
    box-sizing: border-box;
    display: block;
    padding: 0.65rem 0;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

#lp-account-pane #mepr-account-nav a:hover {
    color: #000;
}

#lp-account-pane #mepr-account-nav li.mepr-active a,
#lp-account-pane #mepr-account-nav li.active a {
    color: #000;
    font-weight: 700;
}

/* Hide MemberPress Logout nav item (we have our own at the bottom) */
#lp-account-pane #mepr-account-nav li:has(#mepr-account-logout) {
    display: none;
}

/* Fallback for browsers without :has() */
#lp-account-pane #mepr-account-logout {
    display: none;
}

/* --- Content area (right) --- */
#lp-account-pane > .mp_wrapper:not(:first-child),
#lp-account-pane > .mp_wrapper:has(.mepr-account-form),
#lp-account-pane > .mp_wrapper:has(table),
#lp-account-pane > .mp_wrapper + .mp_wrapper {
    flex: 1;
    min-width: 0;
}

/* Make the first mp_wrapper after nav take remaining space */
#lp-account-pane > .mp_wrapper {
    flex: 1;
    min-width: 0;
}

#lp-account-pane > .mp_wrapper:first-child:has(#mepr-account-nav) {
    flex: 0 0 180px;
}

/* Hide MemberPress spacers */
#lp-account-pane .mepr_spacer {
    display: none;
}

/* Hide validation errors until form is submitted */
#lp-account-pane .cc-error {
    display: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    color: #991b1b;
    margin-left: 0.5rem;
}

#lp-account-pane .mepr-account-form.lp-submitted .cc-error,
#lp-account-pane .lp-show-errors .cc-error {
    display: inline;
}

/* Welcome message */
#lp-account-pane #mepr-account-welcome-message {
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Form rows — clean spacing */
#lp-account-pane .mp-form-row {
    margin-bottom: 1.25rem;
}

#lp-account-pane .mp-form-label {
    margin-bottom: 6px;
}

/* Tables (subscriptions, payments) */
#lp-account-pane table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
}

#lp-account-pane table th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #000;
    text-align: left;
}

#lp-account-pane table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
    vertical-align: middle;
}

#lp-account-pane table tr:hover td {
    background: #fafafa;
}

/* Form inputs (profile editing) */
#lp-account-pane input[type="text"],
#lp-account-pane input[type="email"],
#lp-account-pane input[type="password"],
#lp-account-pane select,
#lp-account-pane textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    background: transparent;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

#lp-account-pane input[type="text"]:focus,
#lp-account-pane input[type="email"]:focus,
#lp-account-pane input[type="password"]:focus,
#lp-account-pane select:focus,
#lp-account-pane textarea:focus {
    outline: none;
    border-color: #000;
}

/* Labels */
#lp-account-pane label {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    margin-bottom: 6px;
}

/* Buttons — Elementor nuke */
#lp-account-pane input[type="submit"],
#lp-account-pane button[type="submit"],
#lp-account-pane .mepr-submit {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px 24px;
    background: #000;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.3s ease;
}

#lp-account-pane input[type="submit"]:hover,
#lp-account-pane button[type="submit"]:hover,
#lp-account-pane .mepr-submit:hover {
    background: #333;
}

/* Shared errors (shown after submit) */
#lp-account-pane .mepr_error {
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* has_errors inline message */
#lp-account-pane .mepr-form-has-errors {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: #991b1b;
    margin-left: 0.75rem;
}

/* Links */
#lp-account-pane a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#lp-account-pane a:hover {
    color: #555;
}

/* Change Password link */
#lp-account-pane .mepr-account-change-password a {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
}

/* =========================================================================
 * ACCOUNT PAGE FIXES (openspec/changes/account-page-fixes)
 *
 * I2 — Save Profile + Change Password render side-by-side.
 * The MemberPress home view emits:
 *     .mp_wrapper
 *       form.mepr-account-form        ← contains Save Profile submit
 *       .mepr_spacer                  ← already hidden at L2942
 *       span.mepr-account-change-password
 * Flexing the mp_wrapper with align-items:flex-end lands the
 * Change Password span at the bottom-right of the form, next to the
 * submit button. Specificity beats L2923-2935 baseline rules on
 * .mp_wrapper because this selector is more specific (:has pseudo).
 * ========================================================================= */
#lp-account-pane .mp_wrapper:has(> form.mepr-account-form) {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
#lp-account-pane .mp_wrapper:has(> form.mepr-account-form) > form.mepr-account-form {
    flex: 1 1 auto;
    min-width: 0;
}
#lp-account-pane .mp_wrapper:has(> form.mepr-account-form) > .mepr-account-change-password {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

/* Dark theme overrides — beats `.mp_wrapper { display: block !important }`
 * at L8375 and `.mepr-account-change-password { margin: 24px 0 0 !important }`
 * at L8611 so Save Profile + Change Password render inline in dark theme
 * too (the default context on /members/?theme=dark). */
body.lp-theme-dark #lp-account-pane .mp_wrapper:has(> form.mepr-account-form) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
body.lp-theme-dark #lp-account-pane .mp_wrapper:has(> form.mepr-account-form) > form.mepr-account-form {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body.lp-theme-dark #lp-account-pane .mp_wrapper:has(> form.mepr-account-form) > .mepr-account-change-password {
    flex: 0 0 auto !important;
    margin: 0 0 12px 0 !important;
}

/* I5 — Inline password change form. Revealed below Save Profile when the
 * user clicks the Change Password link. Replaces the full-pane swap that
 * MP's native action=newpassword triggered. */
#lp-account-pane form.lp-inline-pw {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}
#lp-account-pane form.lp-inline-pw[hidden] {
    display: none !important;
}
#lp-account-pane .lp-inline-pw__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#lp-account-pane .lp-inline-pw__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}
#lp-account-pane .lp-inline-pw__msg {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    min-height: 1.2em;
}
#lp-account-pane .lp-inline-pw__msg:empty {
    display: none;
}
#lp-account-pane .lp-inline-pw__msg--ok {
    color: #15803d;
}
#lp-account-pane .lp-inline-pw__msg--err {
    color: #991b1b;
}

/* Cancel — secondary "ghost" button, matches submit button visual weight
 * but outlined. Uses the same selector depth as L3046-3066 so specificity
 * matches and the `all: unset` baseline flows through. */
#lp-account-pane button.lp-inline-pw__cancel {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 10px 24px;
    background: transparent;
    color: #000;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid #000;
    transition: background 0.2s ease, color 0.2s ease;
}
#lp-account-pane button.lp-inline-pw__cancel:hover {
    background: #000;
    color: #fff;
}

/* When the form is in its "done" state (post successful update), dim the
 * inputs to signal they're no longer the actionable surface — the success
 * message is. Fields remain visible (and empty) for visual continuity. */
#lp-account-pane form.lp-inline-pw.lp-inline-pw--done input[type="password"] {
    opacity: 0.5;
}

/* Dark-theme parity for inline password form: inputs on dark bg, buttons
 * outlined to match the dark submit treatment at L8563, Cancel styled
 * identically to Update Password. Reset the margin-top that the dark
 * submit rule injects — the .lp-inline-pw__actions row already owns its
 * own spacing. */
body.lp-theme-dark #lp-account-pane form.lp-inline-pw {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff;
}
body.lp-theme-dark #lp-account-pane form.lp-inline-pw input[type="password"] {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
body.lp-theme-dark #lp-account-pane form.lp-inline-pw input[type="password"]:focus {
    border-color: #fff !important;
}
body.lp-theme-dark #lp-account-pane .lp-inline-pw__actions button.lp-inline-pw__submit,
body.lp-theme-dark #lp-account-pane .lp-inline-pw__actions button.lp-inline-pw__cancel {
    margin: 0 !important;
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 32px !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s !important;
}
body.lp-theme-dark #lp-account-pane .lp-inline-pw__actions button.lp-inline-pw__submit:hover,
body.lp-theme-dark #lp-account-pane .lp-inline-pw__actions button.lp-inline-pw__cancel:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
}
body.lp-theme-dark #lp-account-pane .lp-inline-pw__msg--ok {
    color: #6ee7b7 !important;
}
body.lp-theme-dark #lp-account-pane .lp-inline-pw__msg--err {
    color: #ff7070 !important;
}

/* Headings */
#lp-account-pane h2,
#lp-account-pane h3,
#lp-account-pane h4 {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #000;
}

/* Loading gif */
#lp-account-pane .mepr-loading-gif {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Logout link — at bottom, outside sidebar */
.lp-account-logout {
    width: 100%;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.lp-account-logout a {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lp-account-logout a:hover {
    color: #000;
    text-decoration: none;
}

/* --- Account pane responsive --- */
@media (max-width: 768px) {
    #lp-account-pane {
        flex-direction: column;
        gap: 1.5rem;
    }

    #lp-account-pane #mepr-account-nav {
        flex: none;
        position: static;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 0.75rem;
    }

    #lp-account-pane #mepr-account-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }

    #lp-account-pane #mepr-account-nav li.mepr-nav-item {
        border-bottom: none;
    }

    #lp-account-pane #mepr-account-nav a {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    #lp-account-pane > .mp_wrapper:first-child:has(#mepr-account-nav) {
        flex: none;
    }

    #lp-account-pane table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   CREATOR DASHBOARD
   Admin-only tab: sub-tabs, cards, stats, inline editing, image pickers
   ========================================================================== */

/* Sub-tab nav */
.lp-cdash {
    padding: 1rem 0;
}

.lp-cdash__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
}

.lp-cdash__nav button.lp-cdash__tab {
    all: unset;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #a3a3a3;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    line-height: 1.4;
}

.lp-cdash__nav button.lp-cdash__tab:hover {
    color: #fff;
}

.lp-cdash__nav button.lp-cdash__tab.lp-cdash__tab--active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Loading state */
.lp-cdash__loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b6b6b;
    font-size: 0.9rem;
}

/* Empty state */
.lp-cdash-empty {
    color: #a3a3a3;
    font-size: 0.9rem;
    padding: 1rem 0;
}

.lp-cdash-empty a {
    color: #fff;
    text-decoration: underline;
}

/* Card grid */
.lp-cdash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Row layout — single-column stack of horizontal rows. Used by Tiers and
   Categories so each entity reads as a compact row (image-left + content-right)
   instead of a tall card. */
.lp-cdash-grid--rows {
    grid-template-columns: 1fr;
    gap: 8px;
}

.lp-cdash-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 1rem;
    background: #171717;
}

.lp-cdash-card--full {
    grid-column: 1 / -1;
}

.lp-cdash-card__title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
    margin: 0 0 1rem;
}

.lp-cdash-card__divider {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.75rem 0;
}

/* Stats */
.lp-cdash-stat-highlight {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.lp-cdash-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #e5e5e5;
}

.lp-cdash-stat span {
    color: #a3a3a3;
}

.lp-cdash-stat strong {
    font-weight: 600;
    color: #fff;
}

.lp-cdash-stat--warn strong {
    color: #fca5a5;
}

/* Migration progress */
.lp-cdash-progress {
    margin-top: 0.5rem;
}

.lp-cdash-progress__bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}

.lp-cdash-progress__fill {
    height: 100%;
    background: #fff;
    border-radius: 4px;
    transition: width 0.3s;
}

.lp-cdash-progress__label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #a3a3a3;
}

/* Activity feed */
.lp-cdash-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-cdash-activity__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.85rem;
}

.lp-cdash-activity__item:last-child {
    border-bottom: none;
}

.lp-cdash-activity__badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 3px;
    flex-shrink: 0;
}

.lp-cdash-activity--signup {
    background: rgba(134,239,172,0.12);
    color: #86efac;
}

.lp-cdash-activity--cancel {
    background: rgba(252,165,165,0.12);
    color: #fca5a5;
}

.lp-cdash-activity--comment {
    background: rgba(147,197,253,0.12);
    color: #93c5fd;
}

.lp-cdash-activity--payment {
    background: rgba(253,186,116,0.12);
    color: #fdba74;
}

.lp-cdash-activity__msg {
    flex: 1;
    color: #e5e5e5;
}

.lp-cdash-activity__time {
    color: #6b6b6b;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Quick actions */
.lp-cdash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lp-cdash-actions__link {
    all: unset;
    cursor: pointer;
    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #e5e5e5;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 4px;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.4;
}

.lp-cdash-actions__link:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.32);
    color: #fff;
}

/* Admin link (Edit in WP Admin) */
.lp-cdash-admin-link {
    font-size: 0.8rem;
    color: #a3a3a3;
    text-decoration: none;
}

.lp-cdash-admin-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* ── Tier cards (row layout) ── */
.lp-cdash-tier {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 12px 14px;
    background: #171717;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: 'Onest', sans-serif;
}

.lp-cdash-tier__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: start;
}

.lp-cdash-tier__content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.lp-cdash-tier__image {
    position: relative;
    width: 120px;
    height: 90px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-cdash-tier__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-cdash-tier__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.lp-cdash-tier__name,
.lp-cdash-tier__name-display {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.lp-cdash-tier__price {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}

.lp-cdash-tier__meta {
    font-size: 0.8rem;
    color: #a3a3a3;
}

.lp-cdash-tier__desc {
    font-size: 0.85rem;
    color: #e5e5e5;
    line-height: 1.5;
}

.lp-cdash-tier__desc-display em {
    color: #6b6b6b;
}

.lp-cdash-tier__desc-input {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    resize: vertical;
    box-sizing: border-box;
}

.lp-cdash-tier__desc-input::placeholder {
    color: #6b6b6b;
}

.lp-cdash-tier__desc-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.lp-cdash-tier__footer {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Tier welcome message editor (per-tier DM body) ── */
.lp-cdash-tier__welcome {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
    font-size: 0.85rem;
    color: #e5e5e5;
}

.lp-cdash-tier__welcome-header {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.4rem;
}

.lp-cdash-tier__welcome-label {
    font-weight: 600;
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lp-cdash-tier__welcome-help {
    font-size: 0.75rem;
    color: #a3a3a3;
}

.lp-cdash-tier__welcome-display {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.lp-cdash-tier__welcome-body {
    margin: 0;
    padding: 0.5rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid rgba(255,255,255,0.16);
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e5e5e5;
    width: 100%;
    box-sizing: border-box;
}

.lp-cdash-tier__welcome-empty {
    margin: 0;
    color: #6b6b6b;
    font-size: 0.8rem;
}

.lp-cdash-tier__welcome-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.lp-cdash-tier .lp-cdash-tier__welcome-tag,
button.lp-cdash-tier__welcome-tag {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: #e5e5e5;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}

.lp-cdash-tier .lp-cdash-tier__welcome-tag:hover,
button.lp-cdash-tier__welcome-tag:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.lp-cdash-tier__welcome-input {
    width: 100%;
    min-height: 8em;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    resize: vertical;
    box-sizing: border-box;
}

.lp-cdash-tier__welcome-input::placeholder {
    color: #6b6b6b;
}

.lp-cdash-tier__welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.lp-cdash-tier__welcome-preview {
    margin-top: 0.5rem;
    padding: 0.6rem 0.7rem;
    background: rgba(252,211,77,0.08);
    border: 1px solid rgba(252,211,77,0.24);
    border-radius: 3px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e5e5e5;
    white-space: normal;
}

/* ── Category cards (row layout) ── */
.lp-cdash-cat {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 12px 14px;
    background: #171717;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: 'Onest', sans-serif;
}

.lp-cdash-cat__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: start;
}

.lp-cdash-cat__content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.lp-cdash-cat__header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lp-cdash-cat__image {
    position: relative;
    width: 120px;
    height: 90px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-cdash-cat__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-cdash-cat__name-display {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.lp-cdash-cat__name-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #fff;
    box-sizing: border-box;
}

.lp-cdash-cat__slug {
    font-size: 0.75rem;
    color: #6b6b6b;
    font-family: monospace;
}

.lp-cdash-cat__desc {
    font-size: 0.85rem;
    color: #e5e5e5;
    line-height: 1.5;
}

.lp-cdash-cat__desc-display em {
    color: #6b6b6b;
}

.lp-cdash-cat__desc-input {
    width: 100%;
    min-height: 60px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    resize: vertical;
    box-sizing: border-box;
}

.lp-cdash-cat__desc-input::placeholder {
    color: #6b6b6b;
}

.lp-cdash-cat__meta {
    font-size: 0.8rem;
    color: #a3a3a3;
}

.lp-cdash-cat__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ── Shared image picker / placeholder ── */
.lp-cdash-img-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-cdash-img-placeholder::after {
    content: 'No image';
    color: #6b6b6b;
    font-size: 0.8rem;
}

/* Hover-pencil image-edit affordance (creator-icon-system spec).
   At rest: button hidden over the image. On hover: scrim + centered
   pencil icon. Placeholder state: always visible icon + "Set image" label.

   4.57.1 specificity bump (.lp-creator prefix) — required to beat the
   catch-all button reset at css:9466+ (.lp-creator button = (0,1,1)
   source-later than this rule, would otherwise win on display/opacity
   and leave the pencil visible at rest). */
.lp-creator button.lp-cdash-img-btn {
    all: unset;
    cursor: pointer;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.4;
}

.lp-creator .lp-cdash-tier__image:hover button.lp-cdash-img-btn,
.lp-creator .lp-cdash-cat__image:hover button.lp-cdash-img-btn {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}

/* Placeholder state — always visible, distinct flat-bg empty-state visual */
.lp-creator .lp-cdash-img-placeholder + button.lp-cdash-img-btn {
    opacity: 1;
    background: rgba(255, 255, 255, 0.04);
    flex-direction: column;
    gap: 6px;
    color: rgba(255, 255, 255, 0.75);
}

/* ── Edit buttons ── */
button.lp-cdash-edit-btn {
    all: unset;
    cursor: pointer;
    font-size: 0.8rem;
    color: #a3a3a3;
    font-family: inherit;
    line-height: 1.4;
}

button.lp-cdash-edit-btn:hover {
    color: #fff;
}

button.lp-cdash-edit-btn.lp-cdash-edit-btn--save {
    color: #fff;
    font-weight: 600;
}

button.lp-cdash-edit-btn.lp-cdash-edit-btn--cancel {
    color: #6b6b6b;
}

/* ── Rules table ── */
.lp-cdash-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.lp-cdash-rules-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgba(255,255,255,0.16);
}

.lp-cdash-rules-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #e5e5e5;
    vertical-align: top;
}

.lp-cdash-rules-table tr:last-child td {
    border-bottom: none;
}

.lp-cdash-rules-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .lp-cdash-grid {
        grid-template-columns: 1fr;
    }

    .lp-cdash__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lp-cdash__nav button.lp-cdash__tab {
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .lp-cdash-activity__item {
        flex-wrap: wrap;
    }

    .lp-cdash-activity__time {
        width: 100%;
        margin-left: 0;
    }

    .lp-cdash-rules-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lp-cdash-tier__header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .lp-cdash-tier__row,
    .lp-cdash-cat__row {
        grid-template-columns: 80px 1fr;
        gap: 10px;
    }

    .lp-cdash-tier__image,
    .lp-cdash-cat__image {
        width: 80px;
        height: 60px;
    }

    .lp-cdash-sc-card[data-section="banner"] {
        grid-template-columns: 1fr;
    }

    .lp-cdash-compare {
        flex-direction: column;
        gap: 0.75rem;
    }

    .lp-cdash-patreon-statuses {
        grid-template-columns: 1fr 1fr;
    }

    .lp-cdash-patreon-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lp-cdash-patreon-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .lp-cdash-patreon-revenue {
        flex-direction: column;
        gap: 1rem;
    }
}


/* ==========================================================================
   CREATOR DASHBOARD — Patreon Migration Tracker
   ========================================================================== */

/* ── Overview comparison layout ── */
.lp-cdash-compare {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.lp-cdash-compare__col {
    flex: 1;
    text-align: center;
}

.lp-cdash-compare__heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a3a3a3;
    margin-bottom: 0.25rem;
}

.lp-cdash-compare__sub {
    font-size: 0.75rem;
    color: #a3a3a3;
    margin-top: -0.25rem;
}

.lp-cdash-tier-compare-label {
    font-size: 0.8rem;
    color: #a3a3a3;
    margin-bottom: 0.25rem;
}

.lp-cdash-stat small {
    font-size: 0.75em;
    color: #a3a3a3;
    font-weight: normal;
}

/* ── Patreon sub-tab header ── */
.lp-cdash-patreon-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.lp-cdash-patreon-synced {
    font-size: 0.75rem;
    color: #a3a3a3;
    display: block;
    margin-top: 0.25rem;
}

.lp-cdash-patreon-refresh {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #0a0a0a;
    border: 1px solid #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lp-cdash-patreon-refresh:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #0a0a0a;
}

.lp-cdash-patreon-refresh:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* membership-source-reconcile §1.7 — chips + secondary action button */
.lp-cdash-patreon-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.lp-cdash-patreon-refresh--secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.lp-cdash-patreon-refresh--secondary:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Audience header refresh — ghost outline (matches msr --secondary). Scoped
 * + 5-pseudo-state enumeration so Hello Elementor's button accent rules
 * (a:hover/:focus/:active/:visited) don't bleed pink through. */
.lp-audience .lp-cdash-patreon-refresh,
.lp-audience .lp-cdash-patreon-refresh:focus,
.lp-audience .lp-cdash-patreon-refresh:active,
.lp-audience .lp-cdash-patreon-refresh:visited {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}
.lp-audience .lp-cdash-patreon-refresh:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
}

.lp-cdash-patreon-chips {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.lp-cdash-patreon-stale,
.lp-cdash-patreon-laststatus {
    display: inline-flex;
    align-items: center;
    padding: 2px 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.4;
    border: 1px solid transparent;
}

.lp-cdash-patreon-stale--idle  { background: rgba(255,255,255,0.06); color: #a3a3a3; border-color: rgba(255,255,255,0.12); }
.lp-cdash-patreon-stale--fresh { background: rgba(34,197,94,0.12);  color: #86efac; border-color: rgba(34,197,94,0.35); }
.lp-cdash-patreon-stale--warn  { background: rgba(234,179,8,0.12);  color: #fde68a; border-color: rgba(234,179,8,0.35); }
.lp-cdash-patreon-stale--stale { background: rgba(239,68,68,0.12);  color: #fca5a5; border-color: rgba(239,68,68,0.35); }

.lp-cdash-patreon-laststatus--idle    { background: rgba(255,255,255,0.06); color: #a3a3a3; border-color: rgba(255,255,255,0.12); }
.lp-cdash-patreon-laststatus--success { background: rgba(34,197,94,0.12);  color: #86efac; border-color: rgba(34,197,94,0.35); }
.lp-cdash-patreon-laststatus--partial { background: rgba(234,179,8,0.12);  color: #fde68a; border-color: rgba(234,179,8,0.35); }
.lp-cdash-patreon-laststatus--error   { background: rgba(239,68,68,0.12);  color: #fca5a5; border-color: rgba(239,68,68,0.35); }

.lp-cdash-patreon-refresh__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(10,10,10,0.3);
    border-top-color: #0a0a0a;
    border-radius: 50%;
    animation: lp-spin 0.6s linear infinite;
}

@keyframes lp-spin {
    to { transform: rotate(360deg); }
}

/* ── Status cards ── */
.lp-cdash-patreon-statuses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.lp-cdash-patreon-status {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.lp-cdash-patreon-status__count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.lp-cdash-patreon-status__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a3a3a3;
    margin-top: 0.25rem;
}

.lp-cdash-patreon-status--active { border-top: 3px solid #fff; }
.lp-cdash-patreon-status--declined { border-top: 3px solid #fca5a5; }
.lp-cdash-patreon-status--former { border-top: 3px solid #6b6b6b; }
.lp-cdash-patreon-status--free { border-top: 3px solid #93c5fd; }

/* ── Tier migration table ── */
.lp-cdash-patreon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #e5e5e5;
}

.lp-cdash-patreon-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid rgba(255,255,255,0.16);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
}

.lp-cdash-patreon-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    vertical-align: middle;
}

.lp-cdash-patreon-table__total td {
    border-top: 2px solid rgba(255,255,255,0.16);
    border-bottom: none;
    color: #fff;
    font-weight: 600;
}

.lp-cdash-patreon-price {
    font-size: 0.75em;
    color: #a3a3a3;
}

/* ── Migration percent bar (inline in table) ── */
.lp-cdash-patreon-pct {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lp-cdash-patreon-pct__bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.lp-cdash-patreon-pct__fill {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.lp-cdash-patreon-pct span {
    font-size: 0.8rem;
    white-space: nowrap;
    min-width: 3em;
    color: #e5e5e5;
}

/* ── Revenue comparison ── */
.lp-cdash-patreon-revenue {
    display: flex;
    gap: 2rem;
}

.lp-cdash-patreon-revenue__col {
    flex: 1;
    text-align: center;
    padding: 1rem 0;
}

.lp-cdash-patreon-revenue__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a3a3a3;
    margin-bottom: 0.5rem;
}

.lp-cdash-patreon-revenue__amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}


/* ==========================================================================
   SITE HEADER + NAV — All non-homepage pages
   White header (centered black logo) + fixed bottom-right nav (desktop)
   + full-width mobile overlay with grain texture (mobile).
   ========================================================================== */

/* Hide Elementor theme header, footer, and social-links popup on all pages */
header.site-header,
footer.site-footer,
.elementor-location-header,
.elementor-location-footer,
.elementor-764,
.elementor-location-popup,
.elementor-739,
#ast-desktop-header,
#colophon {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Shared tap-highlight reset */
.lp-header,
.lp-header *,
.lp-bottomnav,
.lp-bottomnav *,
.lp-mobile-overlay,
.lp-mobile-overlay *,
.lp-mobile-overlay__backdrop {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.lp-header button,
.lp-header a,
.lp-bottomnav a,
.lp-bottomnav button,
.lp-mobile-overlay button,
.lp-mobile-overlay a {
    background-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* --- Header bar — white, centered logo --- */
.lp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    height: 56px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    -webkit-tap-highlight-color: transparent;
}

/* Push page content below fixed header */
body:not(.lp-home) {
    padding-top: 56px !important;
}

.lp-header__logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.lp-header__logo img {
    height: 14px !important;
    width: auto !important;
    max-width: 200px !important;
    max-height: 14px !important;
    filter: none !important;
    object-fit: contain !important;
}
.lp-header__logo span {
    color: #000;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Hamburger — hidden on desktop, shown on mobile */
.lp-header__toggle {
    all: unset;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
    position: absolute;
    right: 1.2rem;
    -webkit-tap-highlight-color: transparent;
}
.lp-header__toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   BOTTOM-RIGHT NAV BAR — Desktop only
   Floating nav over a full-width gradient fade at viewport bottom.
   Same expand/collapse behavior as homepage nav.
   ========================================================================== */

/* Nav bar — fixed bottom-right */
.lp-bottomnav {
    position: fixed;
    bottom: 6px;
    right: 2.5rem;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Nav items — dark text, no background */
.lp-bottomnav__item {
    all: unset;
    color: rgba(0, 0, 0, 0.85);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.lp-bottomnav__item:hover {
    color: #000;
}

/* Nav groups — wrappers for expandable panels */
.lp-bottomnav__group {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- Radio social panel (inline slide) --- */
.lp-bottomnav__radio-panel {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.4rem 0;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s,
                margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-bottomnav__radio-panel.is-open {
    max-width: 240px;
    opacity: 1;
    margin-left: 1.2rem;
    overflow: visible;
}

/* Social icons inside radio panel */
.lp-bottomnav__social {
    all: unset;
    color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    padding: 0.3rem;
}
.lp-bottomnav__social:hover {
    color: #000;
    transform: scale(1.2);
}
.lp-bottomnav__social svg {
    width: 18px;
    height: 18px;
}

/* --- Mailing list panel (inline slide) --- */
.lp-bottomnav__mail-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s,
                margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-bottomnav__mail-panel.is-open {
    max-width: 280px;
    opacity: 1;
    margin-left: 1rem;
}

.lp-bottomnav__mail-form {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0;
    overflow: hidden;
}
.lp-bottomnav__mail-form input[type="email"] {
    all: unset;
    width: 160px;
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    color: #000;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.5);
}
.lp-bottomnav__mail-form input[type="email"]::placeholder {
    color: rgba(0, 0, 0, 0.35);
}
.lp-bottomnav__mail-form button {
    all: unset;
    padding: 0.4rem 0.65rem;
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.8rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.05) !important;
    transition: background 0.2s ease;
}
.lp-bottomnav__mail-form button:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Issue G3 (4.59.3) — GDPR consent + privacy link.
   4.59.4 — shortened to "Privacy · Unsubscribe anytime"; rule applies to
   the bottomnav (stacked below form via flex-direction: column) and the
   mobile overlay (already a column form). The /yamato/ home surface uses
   .lp-home__mailing-disclaimer (sibling of .lp-home__nav, conditional). */
.lp-mailing-consent {
    display: block;
    margin-top: 6px;
    font-family: 'Onest', sans-serif;
    font-size: 0.65rem;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.lp-mailing-consent a,
.lp-mailing-consent a:link,
.lp-mailing-consent a:visited,
.lp-mailing-consent a:hover,
.lp-mailing-consent a:focus,
.lp-mailing-consent a:active {
    color: rgba(0, 0, 0, 0.7) !important;
    text-decoration: underline;
}
.lp-mailing-consent--overlay,
.lp-mailing-consent--overlay a,
.lp-mailing-consent--overlay a:link,
.lp-mailing-consent--overlay a:visited,
.lp-mailing-consent--overlay a:hover,
.lp-mailing-consent--overlay a:focus,
.lp-mailing-consent--overlay a:active {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   MOBILE OVERLAY — Full-screen, grain texture, fade-in
   ========================================================================== */

/* SVG noise filter for grain texture */
.lp-mobile-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

.lp-mobile-overlay__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
body.lp-overlay-open .lp-mobile-overlay__backdrop {
    opacity: 1;
    visibility: visible;
}

.lp-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
}
.lp-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when overlay open */
body.lp-overlay-open {
    overflow: hidden;
}

/* Close button */
.lp-mobile-overlay__close {
    all: unset;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    transition: color 0.2s ease;
    z-index: 1;
}
.lp-mobile-overlay__close:hover {
    color: #fff;
}

/* Nav links — centered, stacked, shifted up to visually center above footer */
.lp-mobile-overlay__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    margin-top: -6rem;
    z-index: 1;
}
.lp-mobile-overlay__link {
    all: unset;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}
.lp-mobile-overlay__link:hover {
    color: #fff;
}

/* Footer — mailing list + social + contact */
.lp-mobile-overlay__footer {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 0 2rem;
    z-index: 1;
}

.lp-mobile-overlay__mail-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.lp-mobile-overlay__mail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: lowercase;
}
.lp-mobile-overlay__mail-input {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.lp-mobile-overlay__mail-input input[type="email"] {
    all: unset;
    font-size: 0.8rem;
    color: #fff;
    padding: 0.4rem 0;
    letter-spacing: 0.03em;
    width: 180px;
    text-align: center;
}
.lp-mobile-overlay__mail-input input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.lp-mobile-overlay__mail-input button {
    all: unset;
    background: transparent !important;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer;
    padding: 0.4rem 0 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.lp-mobile-overlay__mail-input button:hover {
    color: #fff !important;
}

/* Social icons */
.lp-mobile-overlay__social {
    display: flex;
    gap: 1.4rem;
}
.lp-mobile-overlay__social a {
    all: unset;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}
.lp-mobile-overlay__social a:hover {
    color: #fff;
}
.lp-mobile-overlay__social svg {
    width: 16px;
    height: 16px;
}

/* Contact email */
.lp-mobile-overlay__contact {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}
.lp-mobile-overlay__contact:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Mobile breakpoint: show hamburger, hide bottom nav --- */
@media (max-width: 768px) {
    .lp-header {
        padding: 0 1.2rem;
        height: 48px;
    }
    body:not(.lp-home) {
        padding-top: 48px !important;
    }
    .lp-header__logo img {
        height: 12px !important;
    }
    /* Show hamburger on mobile */
    .lp-header__toggle {
        display: flex;
    }
    /* Hide bottom nav on mobile */
    .lp-bottomnav {
        display: none !important;
    }
}


/* ==========================================================================
   HOMEPAGE — IMMERSIVE LANDING
   Full-viewport video/image background, floating minimal UI.
   ========================================================================== */

/* Reset */
body.lp-home {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Hide everything except our homepage elements */
body.lp-home > *:not(.lp-home__bg):not(.lp-home__overlay):not(script):not(link):not(style):not(#wpadminbar) {
    display: none !important;
}

/* Background video / image */
.lp-home__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    z-index: 0;
}
.lp-home__bg--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Poster overlay: covers video until playback starts; fades out on `playing`.
 * `background-color` is emitted inline by lp_render_homepage from
 * home_bg.fallback_color (default #000000). Do NOT set background here. */
.lp-home__bg-poster {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
/* Color BG mode — flat fill behind .lp-home__overlay. */
.lp-home__bg--color {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
}
.lp-home__bg-poster.is-hidden {
    opacity: 0;
}
/* Suppress native play-button overlays on the hero video (iOS Safari, Brave, Chromium). */
video.lp-home__bg::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}
video.lp-home__bg::-webkit-media-controls {
    display: none !important;
}
video.lp-home__bg::-webkit-media-controls-overlay-play-button,
video.lp-home__bg::-internal-media-controls-overlay-cast-button {
    display: none !important;
    opacity: 0 !important;
}

/* Viewport scrim for text legibility.
 * `background` is emitted inline by lp_render_homepage from home_bg.scrim
 * (default rgba(0,0,0,0.15) preserves today's hard-coded value). Do NOT
 * set background here. */
.lp-home__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 2;
}

/* Top gradient vignette — separates logo from background */
.lp-home__overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Logo — top left */
.lp-home__logo {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    z-index: 2;
    text-decoration: none;
}
.lp-home__logo img {
    height: 16px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1); /* force white */
}
.lp-home__logo span {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Members — center */
.lp-home__members {
    all: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    padding: 0.55rem 1.4rem;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background 0.25s ease;
    text-decoration: none;
    display: inline-block;
}
.lp-home__members:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* 4.59.4 — Mailing-list consent disclaimer (sibling of .lp-home__nav).
   Hidden by default; shown only when home.js sets .is-mailing-open on
   .lp-home__overlay, which fires from both the desktop slide-reveal
   (.lp-home__mail-panel.is-open) and mobile takeover (.lp-home__nav.is-panel-mail)
   paths. Sits one row BELOW the floating nav (right-aligned with the
   form) so the disclaimer reads as a footnote to the email input. On
   .is-mailing-open the nav shifts up via .lp-home__nav rule below to
   make room without overlapping the bottom edge. */
.lp-home__mailing-disclaimer {
    position: absolute;
    bottom: 1.25rem;
    right: 2.5rem;
    z-index: 2;
    font-family: 'Onest', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.lp-home__mailing-disclaimer a,
.lp-home__mailing-disclaimer a:link,
.lp-home__mailing-disclaimer a:visited,
.lp-home__mailing-disclaimer a:hover,
.lp-home__mailing-disclaimer a:focus,
.lp-home__mailing-disclaimer a:active {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: underline;
}
.lp-home__overlay.is-mailing-open .lp-home__mailing-disclaimer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 4.59.4 — when mailing-list is open, shift the floating nav UP by one
   row to make room for the disclaimer underneath. Smooth so the nav
   doesn't jump. Reverses when the panel closes. */
.lp-home__overlay.is-mailing-open .lp-home__nav {
    transform: translateY(-1.75rem);
}

/* Nav — bottom right */
.lp-home__nav {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lp-home__nav-item {
    all: unset;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}
.lp-home__nav-item:hover {
    color: #fff;
}

/* Nav groups — wrappers for items with expandable panels */
.lp-home__nav-group {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- Radio social panel --- */
.lp-home__radio-panel {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.4rem 0;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s,
                margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-home__radio-panel.is-open {
    max-width: 240px;
    opacity: 1;
    margin-left: 1.2rem;
    overflow: visible;
}

.lp-home__social {
    all: unset;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    padding: 0.3rem;
}
.lp-home__social:hover {
    color: #fff;
    transform: scale(1.2);
}
.lp-home__social svg {
    width: 18px;
    height: 18px;
}

/* --- Mailing list panel --- */
.lp-home__mail-panel {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s,
                margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-home__mail-panel.is-open {
    max-width: 280px;
    opacity: 1;
    margin-left: 1rem;
}

.lp-home__mail-form {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    overflow: hidden;
}
.lp-home__mail-form input[type="email"] {
    all: unset;
    width: 160px;
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    color: #fff;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.5);
}
.lp-home__mail-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.lp-home__mail-form button {
    all: unset;
    padding: 0.4rem 0.65rem;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
}
.lp-home__mail-form button:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Back button — hidden on desktop */
.lp-home__panel-back {
    display: none;
}

/* Banner — bottom left */
/* Desktop: wrap doesn\'t affect layout; banner keeps its absolute
   positioning. Mobile overrides are in the @media block below. */
.lp-home__banner-wrap {
    display: contents;
}
/* Specificity (0,2,1) so Elementor / Hello-theme button rules can\'t
   override \u2014 same trick as .lp-home__forgot-password button. */
.lp-home__banner-wrap button.lp-home__banner-close,
.lp-home__banner-wrap button[type="button"].lp-home__banner-close {
    display: none;
}
/* Desktop banner: horizontal card mirroring the live site\'s layout.
   Text column on the LEFT holds the title (top) and the Living Proof
   wordmark (bottom), stacked with justify-content: space-between.
   Cover image on the RIGHT, 80px tall with object-fit: contain so
   the full portrait shows without cropping. Background stays the
   black translucent we\'ve been iterating on. */
.lp-home__banner {
    position: absolute;
    bottom: 2.5rem;
    left: 2.5rem;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.7);
    padding: 12px;
    transition: background 0.25s ease;
    width: 220px;
    max-width: none;
}
.lp-home__banner:hover {
    background: rgba(0, 0, 0, 0.85);
}
.lp-home__banner-img {
    display: block;
    height: 80px;
    width: auto;
    /* Preserve full portrait aspect \u2014 no crop. */
    object-fit: contain;
    object-position: center right;
    flex-shrink: 0;
    align-self: center;
}
.lp-home__banner-meta {
    display: flex;
    flex-direction: column;
    /* Stack title + logo together in the middle of the left column so
       there\'s no dead space between them (card height is driven by
       the 80px image on the right). */
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 20px;
}
.lp-home__banner-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    line-height: 1.4;
    text-align: center;
}
.lp-home__banner-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    /* Desktop keeps proper title case ("This Thing of Ours"). Mobile
       override re-applies lowercase to match the nav typography. */
    text-transform: none;
    line-height: 20px;
    text-align: left;
}

/* Living Proof wordmark at the bottom of the desktop banner. Dark
   source image is inverted to white so it reads on the dark box. */
.lp-home__banner-logo {
    display: block;
    width: 50%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .lp-home__logo {
        top: 1.5rem;
        left: 1.5rem;
    }
    .lp-home__logo img {
        height: 18px;
    }

    .lp-home__members {
        font-size: 0.92rem;
        padding: 0.6rem 1.4rem;
    }

    .lp-home__nav {
        /* Nav sits flush at the bottom now that the banner is a
           translucent card overlaying it, not a separate bottom strip. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        right: 1.5rem;
        left: 1.5rem;
        gap: 1.2rem;
        justify-content: flex-end;
    }
    .lp-home__nav-item {
        font-size: 0.75rem;
    }

    /* 4.59.4 — Mobile: disclaimer sits BELOW the form/nav row, anchored
       just above the bottom safe-area inset. The paired .is-mailing-open
       transform on .lp-home__nav (overridden below for mobile) shifts the
       nav up far enough to clear the disclaimer. */
    .lp-home__mailing-disclaimer {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
        right: 1.5rem;
        left: 1.5rem;
        text-align: center;
        font-size: 0.65rem;
    }
    /* Mobile nav shift on .is-mailing-open: -1rem (half of the earlier
       -2rem) tightens the gap between the email input and the disclaimer
       per QA — was reading as too much vertical separation on mobile. */
    .lp-home__overlay.is-mailing-open .lp-home__nav {
        transform: translateY(-1rem);
    }

    /* --- Mobile: hide inline slide panels, use replace-row instead --- */
    .lp-home__radio-panel,
    .lp-home__mail-panel {
        /* Override desktop slide behavior */
        max-width: none !important;
        margin-left: 0 !important;
        overflow: visible !important;
        /* Hidden by default on mobile */
        display: none !important;
        position: static;
        gap: 1.4rem;
        padding: 0;
        opacity: 1 !important;
    }

    /* Back button visible on mobile */
    .lp-home__panel-back {
        all: unset;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.85rem;
        cursor: pointer;
        padding: 0.2rem;
        transition: color 0.2s ease;
    }
    .lp-home__panel-back:hover {
        color: #fff;
    }

    /* When a panel is open: hide all normal nav items, show the panel */
    .lp-home__nav.is-panel-open > .lp-home__nav-item,
    .lp-home__nav.is-panel-open > .lp-home__nav-group {
        display: none !important;
    }

    /* Show the active panel's group and panel */
    .lp-home__nav.is-panel-radio > .lp-home__nav-group--radio {
        display: flex !important;
    }
    .lp-home__nav.is-panel-radio .lp-home__radio-panel {
        display: flex !important;
    }

    .lp-home__nav.is-panel-mail > .lp-home__nav-group--mail {
        display: flex !important;
    }
    .lp-home__nav.is-panel-mail .lp-home__mail-panel {
        display: flex !important;
    }

    /* Social icons on mobile */
    .lp-home__social svg {
        width: 18px;
        height: 18px;
    }
    .lp-home__social {
        padding: 0.4rem;
    }

    /* Banner — full-width bottom strip on mobile */
    /* Mobile banner: full-opacity image + title inside a translucent
       black box. Nav peeks through the box, not through the content.
       .is-dismissed hides the card for the current page view only;
       reload brings it back (no persistence). */
    .lp-home__banner-wrap {
        /* Override the desktop `display: contents` baseline \u2014 on
           mobile we need an actual box so width/position apply and
           the X close anchors relative to the card, not the viewport. */
        display: block;
        position: fixed;
        left: 1rem;
        /* 3.5rem clears the floating .lp-home__nav row so the banner card
           never sits behind the radio / news / store pills on mobile. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem);
        z-index: 9999;
        width: 110px;
        padding: 8px;
        background: rgba(0, 0, 0, 0.8);
        pointer-events: auto;
    }
    .lp-home__banner-wrap.is-dismissed {
        display: none;
    }
    .lp-home__banner {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0;
        background: transparent;
        text-decoration: none;
        max-width: none;
        /* Reset desktop sizing */
        width: auto;
    }
    /* Source order puts meta before image; on mobile flip so image
       renders on top and text below (matches the compact vertical
       layout we had before the horizontal redesign). */
    .lp-home__banner-img {
        order: 1;
        display: block;
        width: 100%;
        height: auto;
        /* Preserve natural portrait aspect \u2014 no crop. */
        aspect-ratio: 663 / 1024;
        object-fit: cover;
        object-position: center;
        align-self: stretch;
    }
    .lp-home__banner-meta {
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0 0.1rem;
        justify-content: flex-start;
    }
    .lp-home__banner-subtitle {
        font-size: 0.72rem;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-transform: lowercase;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.95);
        text-align: center;
    }
    /* Wordmark is desktop-only \u2014 hide on mobile so the card stays
       compact alongside the bottom nav. */
    .lp-home__banner-logo {
        display: none;
    }
    /* X close \u2014 small dark circle, anchored top-right of the card.
       Specificity (0,2,1) via .lp-home__banner-wrap button.[cls] so
       Elementor / Hello-theme button rules (pink accent, large
       padding) cannot override. */
    .lp-home__banner-wrap button.lp-home__banner-close,
    .lp-home__banner-wrap button[type="button"].lp-home__banner-close {
        all: unset;
        cursor: pointer;
        position: absolute;
        top: -0.35rem;
        right: -0.35rem;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.7);
        color: rgba(255, 255, 255, 0.95);
        font-size: 0.85rem;
        line-height: 1;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
    }
    .lp-home__banner-wrap button.lp-home__banner-close:hover,
    .lp-home__banner-wrap button[type="button"].lp-home__banner-close:hover {
        background: rgba(0, 0, 0, 0.9);
    }
    .lp-home__banner-text {
        font-size: 0.65rem;
    }

    /* Mail form full-width on mobile */
    .lp-home__mail-form {
        flex: 1;
    }
    .lp-home__mail-form input[type="email"] {
        width: auto;
        flex: 1;
        font-size: 0.75rem;
    }
}


/* ==========================================================================
   MEMBERS INTERACTION — three-state machine (idle → choice → login-form)
   Openspec: yamato-home-members-interaction
   ========================================================================== */

/* Zero-size positioning anchor at dead center of the viewport. Each of the
   three state children is absolutely positioned from (0, 0) and self-centered
   via transform, so they all sit exactly at the viewport center regardless of
   their intrinsic size. This approach means the toggle variant can inherit the
   base .lp-home__members absolute positioning unchanged — preserving the exact
   original visual of the single "members" pill. */
.lp-home__members-interaction {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 2;
}

/* Hide the bottom-left banner card whenever the center "members" interaction
   is open (choice / login / forgot). Subsequent-sibling combinator + the
   is-state-* classes JS already toggles on .lp-home__members-interaction
   means no extra JS is needed. !important beats the mobile `display:block`
   in the @media block above. */
.lp-home__members-interaction.is-state-choice ~ .lp-home__banner-wrap,
.lp-home__members-interaction.is-state-login ~ .lp-home__banner-wrap,
.lp-home__members-interaction.is-state-forgot ~ .lp-home__banner-wrap,
.lp-home__members-interaction.is-state-reset-code ~ .lp-home__banner-wrap {
    display: none !important;
}

.lp-home__members-interaction > .lp-home__members--toggle,
.lp-home__members-interaction > .lp-home__choice,
.lp-home__members-interaction > .lp-home__login-form,
.lp-home__members-interaction > .lp-home__forgot-password,
.lp-home__members-interaction > .lp-home__reset-code {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    /* Fade out over 300ms, then flip visibility hidden (so focus/click can't
       accidentally hit a faded-out element). Active-state rules below override
       this with a 0s visibility transition so the entering element is
       immediately focusable. */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* JS sets this class before applying the initial state on mount to skip the crossfade. */
.lp-home__members-interaction.no-transition,
.lp-home__members-interaction.no-transition > * {
    transition: none !important;
}

/* --- Toggle and direct-link variants ---
   Both variants use the base .lp-home__members rule unchanged. The toggle is
   an <a href="#members" role="button"> so it renders pixel-identically to the
   original anchor, and the JS click handler calls e.preventDefault() to block
   the fragment navigation. The positioning from the interaction-child rule
   (position:absolute; top/left 0; translate -50%) applies to center the anchor
   on the wrapper's zero-size origin point (= viewport center). No other
   modifier styles needed. */

/* --- Idle state (default): only the members toggle is visible --- */
.lp-home__members-interaction > .lp-home__choice,
.lp-home__members-interaction > .lp-home__login-form,
.lp-home__members-interaction > .lp-home__forgot-password,
.lp-home__members-interaction > .lp-home__reset-code {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* --- Choice state --- */
.lp-home__members-interaction.is-state-choice > .lp-home__members--toggle {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.lp-home__members-interaction.is-state-choice > .lp-home__choice {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease 0.05s, visibility 0s linear 0s;
}

/* --- Login-form state --- */
.lp-home__members-interaction.is-state-login > .lp-home__members--toggle,
.lp-home__members-interaction.is-state-login > .lp-home__choice,
.lp-home__members-interaction.is-state-login > .lp-home__forgot-password,
.lp-home__members-interaction.is-state-login > .lp-home__reset-code {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.lp-home__members-interaction.is-state-login > .lp-home__login-form {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease 0.05s, visibility 0s linear 0s;
}

/* --- Forgot-password state --- */
.lp-home__members-interaction.is-state-forgot > .lp-home__members--toggle,
.lp-home__members-interaction.is-state-forgot > .lp-home__choice,
.lp-home__members-interaction.is-state-forgot > .lp-home__login-form,
.lp-home__members-interaction.is-state-forgot > .lp-home__reset-code {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.lp-home__members-interaction.is-state-forgot > .lp-home__forgot-password {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease 0.05s, visibility 0s linear 0s;
}

/* --- Reset-code state --- */
.lp-home__members-interaction.is-state-reset-code > .lp-home__members--toggle,
.lp-home__members-interaction.is-state-reset-code > .lp-home__choice,
.lp-home__members-interaction.is-state-reset-code > .lp-home__login-form,
.lp-home__members-interaction.is-state-reset-code > .lp-home__forgot-password {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.lp-home__members-interaction.is-state-reset-code > .lp-home__reset-code {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease 0.05s, visibility 0s linear 0s;
}

/* --- Choice container: CSS Grid with a single 1fr column.
   Grid forces all children to the same track width (the max-content of the
   widest child), solving the join/login size mismatch that flexbox + stretch
   couldn't resolve due to the shrink-to-fit containing block. --- */
.lp-home__choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.lp-home__choice-btn {
    all: unset;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    padding: 0.55rem 1.4rem;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background 0.25s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}
.lp-home__choice-btn:hover,
.lp-home__choice-btn:focus-visible {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    outline: none;
}

/* --- Login form container: dark pill matching members/join/login aesthetic --- */
.lp-home__login-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 240px;
    max-width: calc(100vw - 3rem);
    padding: 1.2rem 1.4rem;
    background: rgba(0, 0, 0, 0.5);
}

/* Error strip inside the form pill (compact, above fields) */
.lp-home__login-error {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #ff8080;
    text-align: center;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 128, 128, 0.45);
    text-transform: lowercase;
    margin: 0 0 0.3rem 0;
}

/* --- MemberPress [mepr-login-form] internals ---
   Structure emitted by MemberPress:
     form#mepr_loginform
       .mp-form-row.mepr_username
         .mp-form-label > label[for="user_login"]
         input[type=text][name=log]#user_login
       .mp-form-row.mepr_password
         .mp-form-label
           label[for="user_pass"]
           .mp-hide-pw
             input[type=password][name=pwd]#user_pass
             button.mp-hide-pw.hide-if-no-js  (show/hide toggle — we hide it)
       div > label > input[type=checkbox][name=rememberme] + "Remember Me"
       .mp-spacer  (hidden)
       .submit > input[type=submit][name=wp-submit]  + hidden fields
*/

.lp-home__login-form form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.lp-home__login-form .mp-form-row {
    margin: 0;
    padding: 0;
}

.lp-home__login-form .mp-spacer {
    display: none;
}

/* All MemberPress form overrides below use .lp-home__login-form .mp_wrapper
   as the selector base to beat the global .mp_wrapper rules at lines 120–250
   which have specificity (0,3,1). Our selectors need at least (0,3,1) to
   win by source order. Fallback selectors without .mp_wrapper are kept for
   forward-compat in case MP changes its wrapper class. */

/* Hide the password show/hide toggle */
.lp-home__login-form .mp_wrapper .mp-hide-pw button,
.lp-home__login-form .mp-hide-pw button,
.lp-home__login-form .mp-hide-pw .dashicons {
    display: none;
}

/* Password wrapper: plain block */
.lp-home__login-form .mp_wrapper .mp-hide-pw,
.lp-home__login-form .mp-hide-pw {
    display: block;
    position: relative;
}

/* Kill MemberPress row spacing */
.lp-home__login-form .mp_wrapper .mp-form-row,
.lp-home__login-form .mp-form-row {
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

/* Field labels (Username / Password) — nav-font language in white */
.lp-home__login-form .mp_wrapper .mp-form-label,
.lp-home__login-form .mp-form-label {
    margin: 0 0 0.2rem 0;
    padding: 0;
}
.lp-home__login-form .mp_wrapper .mp-form-label label,
.lp-home__login-form .mp-form-label label {
    display: block;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

/* Inputs: transparent, thin bottom-border only */
.lp-home__login-form .mp_wrapper .mp-form-row input[type="text"],
.lp-home__login-form .mp_wrapper .mp-form-row input[type="password"],
.lp-home__login-form .mp_wrapper input[type="text"],
.lp-home__login-form .mp_wrapper input[type="password"],
.lp-home__login-form input[type="text"],
.lp-home__login-form input[type="password"],
.lp-home__login-form input#user_login,
.lp-home__login-form input#user_pass {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0 0.3rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    font-family: inherit;
    border-radius: 0;
    -webkit-appearance: none;
}
.lp-home__login-form .mp_wrapper input[type="text"]::placeholder,
.lp-home__login-form .mp_wrapper input[type="password"]::placeholder,
.lp-home__login-form input[type="text"]::placeholder,
.lp-home__login-form input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.lp-home__login-form .mp_wrapper input[type="text"]:focus,
.lp-home__login-form .mp_wrapper input[type="password"]:focus,
.lp-home__login-form input[type="text"]:focus,
.lp-home__login-form input[type="password"]:focus {
    outline: none;
    border-bottom-color: rgba(255, 255, 255, 0.75);
    border-color: transparent transparent rgba(255, 255, 255, 0.75) transparent;
}

/* Remember Me */
.lp-home__login-form .mp_wrapper input[type="checkbox"],
.lp-home__login-form input[type="checkbox"] {
    accent-color: #fff;
    cursor: pointer;
    margin: 0 0.45rem 0 0;
    vertical-align: middle;
    width: auto;
}
.lp-home__login-form .mp_wrapper label,
.lp-home__login-form label {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    cursor: pointer;
    font-family: inherit;
}

/* Submit button: thin-bordered pill — stands out against the form pill
   instead of merging with it. Matches nav/members typography. */
.lp-home__login-form .submit {
    display: flex;
    justify-content: center;
    margin-top: 0.3rem;
}
/* Inline login error — pre-rendered inside .lp-home__login-form, toggled via
   [hidden]. Specificity prefix `.lp-home__login-form` beats any generic
   inherited rule; the [hidden] guard with !important protects display:none
   against any future display rule that might target this class. */
.lp-home__login-form .lp-home__login-inline-error {
    color: #ff8080;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    font-family: inherit;
    padding: 0.2rem 0;
}
.lp-home__login-form .lp-home__login-inline-error[hidden] {
    display: none !important;
}

/* Specificity must beat .mp_wrapper input[type="submit"].mepr-share-button
   at (0,3,1) — achieved via .lp-home__login-form .mp_wrapper input at (0,3,1)
   which then wins by source order (this rule comes later). */
.lp-home__login-form .mp_wrapper input[type="submit"],
.lp-home__login-form .mp_wrapper input[name="wp-submit"],
.lp-home__login-form input[type="submit"],
.lp-home__login-form input[name="wp-submit"] {
    all: unset;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    padding: 0.35rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.lp-home__login-form .mp_wrapper input[type="submit"]:hover,
.lp-home__login-form .mp_wrapper input[name="wp-submit"]:hover,
.lp-home__login-form input[type="submit"]:hover,
.lp-home__login-form input[name="wp-submit"]:hover,
.lp-home__login-form input[type="submit"]:focus-visible,
.lp-home__login-form input[name="wp-submit"]:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    outline: none;
}

/* Forgot Password link (if MemberPress emits one in this context — scoped
   tight so it doesn't bleed into other overlay links) */
.lp-home__login-form a[href*="lostpassword"],
.lp-home__login-form a[href*="forgot"] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    text-decoration: underline;
    text-align: center;
    transition: color 0.2s ease;
    display: inline-block;
    margin-top: 0.2rem;
}
.lp-home__login-form a[href*="lostpassword"]:hover,
.lp-home__login-form a[href*="forgot"]:hover {
    color: #fff;
}

/* ==========================================================================
   FORGOT PASSWORD — inline form inside the interaction state machine
   Same pill aesthetic as the login form container.
   ========================================================================== */

.lp-home__forgot-password {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 240px;
    max-width: calc(100vw - 3rem);
    padding: 1.2rem 1.4rem;
    background: rgba(0, 0, 0, 0.5);
}

.lp-home__forgot-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
}

.lp-home__forgot-form label {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    font-family: inherit;
}

.lp-home__forgot-form input[type="text"] {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0 0.3rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    font-family: inherit;
}
.lp-home__forgot-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.lp-home__forgot-form input[type="text"]:focus {
    outline: none;
    border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* Bumped specificity (0,2,1) so Elementor / Hello-theme rules on
   generic button[type="submit"] don\'t override. Matches the login
   button treatment exactly (.lp-home__login-form input[type="submit"]
   at 0,2,1). */
.lp-home__forgot-password button.lp-home__forgot-submit,
.lp-home__forgot-password button[type="submit"] {
    all: unset;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    padding: 0.35rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    margin-top: 0.3rem;
}
.lp-home__forgot-password button.lp-home__forgot-submit:hover,
.lp-home__forgot-password button[type="submit"]:hover,
.lp-home__forgot-password button.lp-home__forgot-submit:focus-visible,
.lp-home__forgot-password button[type="submit"]:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    outline: none;
}

.lp-home__forgot-back {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    text-decoration: underline;
    text-align: center;
    transition: color 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    margin-top: 0.15rem;
}
.lp-home__forgot-back:hover {
    color: #fff;
}

/* Result message (replaces form on success) */
.lp-home__forgot-result {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.5;
    text-transform: lowercase;
    padding: 0.3rem 0;
}


/* --- Mobile: larger form inputs (prevent iOS zoom-on-focus) --- */
@media (max-width: 768px) {
    .lp-home__choice {
        gap: 1rem;
    }

    /* Match the desktop .lp-bottomnav__item typography so the floating
       members interaction reads as a single family across breakpoints.
       Mobile bump to 0.92rem keeps size consistent with the idle
       .lp-home__members pill on mobile. */
    .lp-home__choice-btn {
        font-size: 0.92rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        padding: 0.55rem 1.2rem;
        min-width: auto;
    }

    .lp-home__login-form {
        width: calc(100vw - 3rem);
        max-width: 300px;
        padding: 1.3rem 1.5rem;
    }

    /* iOS Safari zooms any focused input with font-size < 16px. 1rem = 16px at
       the default root size, which is the smallest value that reliably
       suppresses zoom. Mobile inputs are slightly bigger than desktop for
       this reason — there's no way around it. */
    .lp-home__login-form .mp_wrapper .mp-form-row input[type="text"],
    .lp-home__login-form .mp_wrapper .mp-form-row input[type="password"],
    .lp-home__login-form .mp_wrapper input[type="text"],
    .lp-home__login-form .mp_wrapper input[type="password"],
    .lp-home__login-form input[type="text"],
    .lp-home__login-form input[type="password"],
    .lp-home__login-form input#user_login,
    .lp-home__login-form input#user_pass {
        font-size: 1rem;
        padding: 0.4rem 0 0.35rem 0;
    }

    .lp-home__login-form .mp_wrapper input[type="submit"],
    .lp-home__login-form .mp_wrapper input[name="wp-submit"],
    .lp-home__login-form input[type="submit"],
    .lp-home__login-form input[name="wp-submit"] {
        font-size: 0.75rem;
        padding: 0.4rem 1.1rem;
    }

    .lp-home__forgot-password {
        width: calc(100vw - 3rem);
        max-width: 300px;
        padding: 1.3rem 1.5rem;
    }

    .lp-home__forgot-form input[type="text"] {
        font-size: 1rem;
        padding: 0.4rem 0 0.35rem 0;
    }

    .lp-home__forgot-submit {
        font-size: 0.75rem;
        padding: 0.4rem 1.1rem;
    }
}


/* ==========================================================================
   NEWS GRID CAROUSEL — ALD-inspired, viewport-fitted
   ========================================================================== */

/* Kill Elementor + theme spacing around the news grid */
.elementor-widget-shortcode:has(.lp-news-grid) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-element:has(.lp-news-grid) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has(.lp-news-grid),
.elementor-container:has(.lp-news-grid),
.elementor-column:has(.lp-news-grid),
.elementor-column-wrap:has(.lp-news-grid),
.elementor-widget-wrap:has(.lp-news-grid),
.e-con:has(.lp-news-grid) {
    padding: 0 !important;
    margin: 0 !important;
}
body:has(.lp-news-grid) .site-main,
body:has(.lp-news-grid) #content,
body:has(.lp-news-grid) .page-content,
body:has(.lp-news-grid) .entry-content,
body:has(.lp-news-grid) .elementor,
body:has(.lp-news-grid) .site-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* News grid container */
.lp-news-grid {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Grid list: 2 columns desktop */
.lp-news-grid__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

/* Grid items */
.lp-news-grid__item {
    display: block;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1;
}

.lp-news-grid__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: opacity 0.3s ease;
    max-width: none !important;
}

.lp-news-grid__item:hover img {
    opacity: 0.85;
}

/* Title overlay — full-width gradient bar across the bottom (4.58.13). */
.lp-news-grid__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.85) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    padding: 32px 12px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    max-width: none;
    line-height: 1.3;
    box-sizing: border-box;
}

.lp-news-grid__empty {
    text-align: center;
    color: #999;
    padding: 4rem 1rem;
    font-size: 0.9rem;
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .lp-news-grid__list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .lp-news-grid__title {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}


/* ==========================================================================
   MAGAZINE CAROUSEL — Horizontal slide, wrap-around
   ========================================================================== */

/* Kill Elementor container padding + disable page scroll */
/* ==========================================================================
   NEWS CAROUSEL — 1×3 paginated (desktop), scroll grid (mobile)
   ========================================================================== */

/* Desktop: full-bleed viewport takeover */
body:has(.lp-news-carousel) {
    overflow: hidden !important;
    height: 100vh !important;
}

.elementor-widget-shortcode:has(.lp-news-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-element:has(.lp-news-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-section:has(.lp-news-carousel),
.elementor-container:has(.lp-news-carousel),
.elementor-column:has(.lp-news-carousel),
.elementor-column-wrap:has(.lp-news-carousel),
.elementor-widget-wrap:has(.lp-news-carousel),
.e-con:has(.lp-news-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}
body:has(.lp-news-carousel) .site-main,
body:has(.lp-news-carousel) #content,
body:has(.lp-news-carousel) .page-content,
body:has(.lp-news-carousel) .entry-content,
body:has(.lp-news-carousel) .elementor,
body:has(.lp-news-carousel) .site-content {
    padding: 0 !important;
    margin: 0 !important;
}
body:has(.lp-news-carousel) .site-footer,
body:has(.lp-news-carousel) footer {
    display: none !important;
}

/* Carousel container — flexbox row: [arrow] [stage] [arrow] */
.lp-news-carousel {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 36px;
    box-sizing: border-box;
    background: #fff;
    z-index: 10;
}

.lp-news-carousel__stage {
    flex: 1;
    position: relative;
    height: 80%;
    overflow: hidden;
}

.lp-news-carousel__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}

.lp-news-carousel__track--clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
}

/* Cards — hidden by default, JS shows active ones */
.lp-news-carousel__card {
    display: none;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    flex: 0 0 calc((100% - 12px) / 3);
    max-width: calc((100% - 12px) / 3);
    cursor: pointer;
}

.lp-news-carousel__card--active {
    display: flex;
}

.lp-news-carousel__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.lp-news-carousel__card:hover img {
    opacity: 0.85;
}

/* Title overlay — full-width gradient bar across the bottom (4.58.13). */
.lp-news-carousel__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.85) 100%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    padding: 32px 12px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    max-width: none;
    line-height: 1.3;
    box-sizing: border-box;
}

/* Side arrows — same style as magazine carousel */
.lp-news-carousel__arrow {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 2rem;
    color: #999 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    z-index: 6;
    padding: 0 12px;
}

.lp-news-carousel__arrow:hover,
.lp-news-carousel__arrow:focus,
.lp-news-carousel__arrow:active {
    color: #000 !important;
    background: transparent !important;
}

.lp-news-carousel__empty {
    text-align: center;
    color: #999;
    padding: 4rem 1rem;
    font-size: 0.9rem;
}

/* Mobile: hide carousel, show scroll grid */
.lp-news-carousel-mobile {
    display: none;
}

.lp-news-carousel-mobile__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    width: 100%;
}

@media (max-width: 768px) {
    /* Undo full-bleed on mobile */
    body:has(.lp-news-carousel) {
        overflow: auto !important;
        height: auto !important;
    }
    body:has(.lp-news-carousel) .site-footer,
    body:has(.lp-news-carousel) footer {
        display: block !important;
    }

    /* JS toggles display, but ensure mobile grid items match news grid style */
    .lp-news-carousel-mobile .lp-news-grid__item {
        display: block;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        aspect-ratio: 1 / 1;
    }

    .lp-news-carousel-mobile .lp-news-grid__item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        max-width: none !important;
    }

    .lp-news-carousel-mobile .lp-news-grid__title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 35%, rgba(0,0,0,0.85) 100%);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: lowercase;
        padding: 28px 10px 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        max-width: none;
        line-height: 1.3;
        box-sizing: border-box;
    }
}


body:has(.lp-mag-carousel) {
    overflow: hidden !important;
    height: 100vh !important;
}

.elementor-widget-shortcode:has(.lp-mag-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}
.elementor-element:has(.lp-mag-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill all Elementor section/container spacing up the tree */
.elementor-section:has(.lp-mag-carousel),
.elementor-container:has(.lp-mag-carousel),
.elementor-column:has(.lp-mag-carousel),
.elementor-column-wrap:has(.lp-mag-carousel),
.elementor-widget-wrap:has(.lp-mag-carousel),
.e-con:has(.lp-mag-carousel) {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill any gap between header and carousel */
body:has(.lp-mag-carousel) .site-main,
body:has(.lp-mag-carousel) #content,
body:has(.lp-mag-carousel) .page-content,
body:has(.lp-mag-carousel) .entry-content,
body:has(.lp-mag-carousel) .elementor,
body:has(.lp-mag-carousel) .site-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Main carousel container — flexbox row: [arrow] [stage] [arrow] */
.lp-mag-carousel {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    z-index: 10;
}

/* Kill any Elementor footer/bottom gap */
.elementor-location-single:has(.lp-mag-carousel),
.elementor-page:has(.lp-mag-carousel) .site-main,
.elementor-page:has(.lp-mag-carousel) .page-content,
.elementor-page:has(.lp-mag-carousel) #content,
.elementor-page:has(.lp-mag-carousel) .entry-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body:has(.lp-mag-carousel) .site-footer,
body:has(.lp-mag-carousel) footer {
    display: none !important;
}

/* Stage holds the sliding track */
.lp-mag-carousel__stage {
    flex: 1;
    position: relative;
    height: 80%;
    overflow: hidden;
}

/* Track: holds the visible cards, slides horizontally */
.lp-mag-carousel__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

/* Clone track for slide animation */
.lp-mag-carousel__track--clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Cover cards — hidden by default, JS shows active ones */
.lp-mag-carousel__card {
    display: none;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    height: 100%;
    flex: 0 0 calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
}

.lp-mag-carousel__card--active {
    display: flex;
    pointer-events: auto;
}

.lp-mag-carousel__card img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Side arrows */
.lp-mag-carousel__arrow {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 2rem;
    color: #999 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    z-index: 6;
    padding: 0 12px;
}

.lp-mag-carousel__arrow:hover,
.lp-mag-carousel__arrow:focus,
.lp-mag-carousel__arrow:active {
    color: #000 !important;
    background: transparent !important;
}

.lp-mag-carousel__empty {
    text-align: center;
    color: #999;
    padding: 4rem 1rem;
    font-size: 0.9rem;
}

/* Mobile — single item, revolving */
@media (max-width: 768px) {
    .lp-mag-carousel {
        top: 48px;
    }

    .lp-mag-carousel__stage {
        height: 90%;
    }

    .lp-mag-carousel__track {
        gap: 0;
    }

    .lp-mag-carousel__card {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
    }

    .lp-mag-carousel__card img {
        max-height: 95%;
        max-width: 100%;
    }

    .lp-mag-carousel__arrow {
        font-size: 1.2rem;
        width: 24px;
        height: 24px;
        padding: 0 4px;
    }
}

/* ============================================================
   STORE — [lp_shop] Curated Gallery
   ============================================================ */

:root {
    --lp-shop-bg: #fff;
    --lp-shop-text: #111;
    --lp-shop-muted: #888;
    --lp-shop-sold: #c0392b;
    --lp-shop-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- Page resets: lock to viewport, no body scroll --- */
body.lp-store-page {
    background-color: var(--lp-shop-bg) !important;
    overflow: hidden !important;
    height: 100vh !important;
}

body.lp-store-page .entry-title,
body.lp-store-page .page-title,
body.lp-store-page .elementor-heading-title {
    display: none !important;
}

body.lp-store-page .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.lp-store-page .e-con {
    --content-width: 100% !important;
    --container-max-width: 100% !important;
    max-width: 100% !important;
}

body.lp-store-page .elementor-widget-container,
body.lp-store-page .elementor-shortcode {
    max-width: none !important;
}

/* Hide footer on store page (full viewport) */
body.lp-store-page footer,
body.lp-store-page .site-footer,
body.lp-store-page .elementor-location-footer {
    display: none !important;
}

/* --- Container: fill remaining viewport below header --- */
.lp-shop {
    width: 100%;
    height: calc(100vh - 70px - 30px);
    margin: 0;
    padding: 0;
    font-family: 'Onest', sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Sidebar + Main layout --- */
.lp-shop__layout {
    display: flex;
    align-items: stretch;
    gap: 140px;
    max-width: 1240px;
    margin: 0 auto;
    height: 100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* --- Sidebar nav (positioned near grid) --- */
.lp-shop__sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 100px;
    z-index: 10;
}

.lp-shop__cat {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--lp-shop-muted);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    padding: 2px 0;
    transition: color 0.2s ease;
    cursor: pointer;
    text-align: right;
}

.lp-shop__cat:hover {
    color: var(--lp-shop-text);
}

.lp-shop__cat--active {
    color: var(--lp-shop-text);
    font-weight: 700;
}

/* --- Main content area: internal scroll --- */
.lp-shop__main {
    min-width: 0;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* QA #8 — keep scrollbar hidden until pointer enters the scroll area.
       Firefox: scrollbar-color transparent both. WebKit: see below. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 200ms ease;
}
.lp-shop__main:hover {
    scrollbar-color: #ccc transparent;
}

/* Minimal scrollbar — thumb fades in on hover (QA #8) */
.lp-shop__main::-webkit-scrollbar {
    width: 4px;
}
.lp-shop__main::-webkit-scrollbar-track {
    background: transparent;
}
.lp-shop__main::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 200ms ease;
}
.lp-shop__main:hover::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* --- Product Grid: 3 columns, centered --- */
.lp-shop__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
}

/* --- Product Card --- */
.lp-shop__item {
    position: relative;
    min-width: 0;
}

.lp-shop__link {
    text-decoration: none;
    color: var(--lp-shop-text);
    display: block;
    cursor: pointer;
    position: relative;
    text-align: center;
}

/* --- Image --- */
.lp-shop__img-wrap {
    position: relative;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc((100vh - 250px) / 2);
    aspect-ratio: 3 / 4;
    min-width: 0;
}

.lp-shop__img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.3s ease;
}

.lp-shop__link:hover .lp-shop__img {
    opacity: 0.92;
}

/* --- Title (centered below image, not overlay) --- */
.lp-shop__label {
    display: inline-block;
    margin-top: 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    box-sizing: border-box;
}

.lp-shop__sold-out {
    font-size: 0.6rem;
    color: var(--lp-shop-sold);
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.lp-shop__empty {
    text-align: center;
    color: var(--lp-shop-muted);
    font-size: 0.85rem;
    padding: 4rem 0;
}

/* --- Crossfade animations --- */
.lp-shop--fading-out {
    animation: lp-shop-fade-out 0.3s var(--lp-shop-ease) forwards;
}

.lp-shop--fading-in {
    animation: lp-shop-fade-in 0.32s var(--lp-shop-ease) forwards;
}

@keyframes lp-shop-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes lp-shop-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Detail view: sidebar hidden handled by JS --- */

/* --- Back link --- */
.lp-shop__back {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--lp-shop-muted);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
}

.lp-shop__back:hover {
    color: var(--lp-shop-text);
}

/* --- Detail inner: stacked images left, sticky info right --- */
.lp-shop__detail-inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 60px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Gallery — main image + thumbnail strip */
.lp-shop__detail-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-shop__detail-main-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.lp-shop__detail-main-img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.15s ease;
}

/* Thumbnail strip */
.lp-shop__detail-thumbs {
    display: flex;
    gap: 8px;
    padding: 16px 0 0;
    flex-wrap: wrap;
}

.lp-shop__detail-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.45;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.lp-shop__detail-thumb:hover {
    opacity: 0.8;
}

.lp-shop__detail-thumb--active {
    opacity: 1;
    border-color: var(--lp-shop-text);
}

/* Sticky info panel */
.lp-shop__detail-info {
    position: sticky;
    top: 0;
    padding-top: 0;
}

/* Category tag */
.lp-shop__detail-cat {
    font-family: 'Onest', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--lp-shop-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.lp-shop__detail-title {
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: lowercase;
    color: var(--lp-shop-text);
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

.lp-shop__detail-desc {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--lp-shop-muted);
    margin: 0 0 1.5rem 0;
}

.lp-shop__detail-desc p {
    margin: 0 0 0.75rem 0;
}

.lp-shop__detail-price {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--lp-shop-text);
    display: block;
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}

/* Divider between price and description */
.lp-shop__detail-divider {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 1rem 0;
}

/* Quantity selector */
.lp-shop__detail-qty {
    margin-bottom: 1rem;
}

.lp-shop__detail-qty-label {
    font-family: 'Onest', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--lp-shop-muted);
    text-transform: lowercase;
    display: block;
    margin-bottom: 0.5rem;
}

.lp-shop__detail-qty-ctrl {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
}

.lp-shop__qty-btn {
    all: unset;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--lp-shop-text);
    transition: background 0.15s ease;
    border: none;
}

.lp-shop__qty-btn:hover {
    background: #f5f5f5;
}

.lp-shop__qty-val {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    width: 40px;
    text-align: center;
    display: inline-block;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 36px;
    line-height: 36px;
}

/* --- Add to Cart button --- */
.lp-shop__add-to-cart {
    all: unset;
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: #fff;
    background: var(--lp-shop-text);
    padding: 12px 32px;
    margin-top: 1.5rem;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
    border: none;
}

.lp-shop__add-to-cart:hover {
    opacity: 0.85;
}

.lp-shop__add-to-cart--disabled,
.lp-shop__add-to-cart:disabled {
    background: #ddd;
    color: #999;
    cursor: not-allowed;
    border: none;
}

.lp-shop__add-to-cart--disabled:hover,
.lp-shop__add-to-cart:disabled:hover {
    opacity: 1;
}

.lp-shop__view-cart {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--lp-shop-muted);
    text-decoration: none;
    display: inline-block;
    margin-top: 0.75rem;
    transition: color 0.2s ease;
}

.lp-shop__view-cart:hover {
    color: var(--lp-shop-text);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .lp-shop__sidebar {
        left: 10px;
    }
}

@media (max-width: 768px) {
    .lp-shop {
        height: calc(100vh - 60px);
    }

    .lp-shop__sidebar {
        position: static;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 16px;
        padding: 12px 16px;
    }

    .lp-shop__cat {
        text-align: center;
    }

    .lp-shop__main {
        padding: 1rem 16px 3rem;
    }

    .lp-shop__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .lp-shop__detail-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .lp-shop__detail-info {
        position: static;
    }
}

@media (max-width: 480px) {
    .lp-shop__grid {
        gap: 16px 10px;
    }

    .lp-shop__label {
        font-size: 0.6rem;
        padding: 4px 8px;
    }
}

/* =====================================================================
   19. Magazine Single Post — Viewport Fit (CSS Grid approach)
   Bypasses Elementor's flex variable system entirely by switching
   the parent container to CSS Grid.
   ===================================================================== */

/* Lock body scroll on magazine single posts (desktop) */
body.single-post:has(.elementor-location-single.category-magazine) {
    overflow: hidden !important;
    height: 100dvh !important;
    padding-top: 0 !important;
}

/* Kill WP block spacing */
body.single-post .elementor-location-single.category-magazine {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix header/footer as overlays so content uses full viewport */
body.single-post:has(.elementor-location-single.category-magazine) .elementor-location-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

body.single-post:has(.elementor-location-single.category-magazine) .elementor-location-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* ---- Parent container: CSS Grid replaces Elementor's flex ---- */
body.single-post .elementor-location-single.category-magazine > .e-con.e-parent {
    display: grid !important;
    grid-template-columns: 45% 1fr !important;
    align-items: center !important;
    gap: 40px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 68px 5vw 40px 18vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ---- Image column ---- */
body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Featured image widget wrappers */
body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-featured-image,
body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-featured-image .elementor-widget-container {
    height: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* The cover image itself — fully visible, never cropped */
.elementor-755 .elementor-element.elementor-element-779783f1 img,
body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-featured-image img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 108px) !important;
    object-fit: contain !important;
}

/* ---- Text column ---- */
body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    height: auto !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* Force text widgets to fill column width */
body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:last-child .elementor-widget,
body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:last-child .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Typography — left-aligned */
body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-title .elementor-heading-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-content {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 14px !important;
    text-align: left !important;
    line-height: 1.6 !important;
}

/* ---- Mobile: stack vertically, allow scroll ---- */
@media (max-width: 767px) {
    body.single-post:has(.elementor-location-single.category-magazine) {
        overflow: auto !important;
        height: auto !important;
        /* 4.59.7 — Mia's rejected-alt path: clearance for the 56px fixed
           .lp-header moves to the inner .e-con.e-parent padding-top below.
           Body padding-top stays 0 (matches desktop). Trying this geometry
           to rule out iOS URL-bar interactions with body padding driving
           the cover-image scroll jitter. */
        padding-top: 0 !important;
    }

    body.single-post:has(.elementor-location-single.category-magazine) .elementor-location-header,
    body.single-post:has(.elementor-location-single.category-magazine) .elementor-location-footer {
        position: relative;
    }

    body.single-post .elementor-location-single.category-magazine > .e-con.e-parent {
        display: grid !important;
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        /* 4.59.7 — 76px top = 56px .lp-header + 20px breathing room. Moves
           header clearance from body to inner container (Mia's alt). */
        padding: 76px 20px 20px !important;
        overflow: visible !important;
        /* 4.58.13 — page bg matches image letterbox bg so iOS rubber-band
           scroll-overshoot doesn't expose a contrasting band at top/bottom. */
        background-color: #fff !important;
    }

    /* 4.58.13 — neutralize Elementor template-755 per-post --order:1/--order:2
       swap (text col=1, image col=2 at <=1024px) so DOM order wins on mobile:
       image (first child) at top, text (last child) below. */
    body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child {
        order: 0 !important;
    }

    body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:first-child {
        /* 4.59.8 — removed `max-height: 60svh` (svh-relative) — iOS Brave
           was re-evaluating it on bottom-toolbar collapse, driving the
           cover-image jitter. Replaced with aspect-ratio sizing on the
           IMG itself (below) which is purely a function of width and
           fully decoupled from viewport-height events. */
        width: 100% !important;
        /* match page bg so object-fit:contain letterbox bands don't show
           during iOS rubber-band scroll-overshoot at top of page. */
        background-color: #fff !important;
    }

    body.single-post .elementor-location-single.category-magazine .elementor-widget-theme-post-featured-image img {
        width: 100% !important;
        max-width: 100% !important;
        /* 4.59.8 — lock the IMG to its natural 5:7 portrait aspect ratio.
           Magazine covers are uniformly 5:7 (sampled 10 issues: range
           0.697–0.710). Image height = container width × 7/5, derived
           entirely from a stable axis. No viewport-height units anywhere
           in the IMG's sizing chain — immune to Brave/Safari URL-bar +
           bottom-toolbar collapse events. */
        aspect-ratio: 5 / 7 !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    body.single-post .elementor-location-single.category-magazine > .e-con.e-parent > .e-child:last-child {
        max-height: none !important;
        overflow-y: visible !important;
        padding: 20px 0 !important;
    }
}


/* ==========================================================================
   MEMBERS DASHBOARD — DARK THEME
   Scoped to /members/ via body.lp-theme-dark (Phase 1 flag: ?theme=dark).
   See openspec change `members-dashboard-dark-theme` for the full plan.

   Build order (one commit per section):
     §2  Page chrome (header, body bg)
     §3  Tab row (pills → typographic text)
     §4  Stream layout + Option B gated card
     §5  Grid layout (no gating — teaser)
     §6  Messages slide-over panel
     §7  Account pane takeover (MemberPress overrides)
     §8  Audio player dark skin
   ========================================================================== */


/* --------------------------------------------------------------------------
   Utility icons — hidden by default, shown only under the dark-theme flag.
   The shortcode always emits the icon markup so the DOM is consistent; this
   rule makes them invisible on the live light theme.
   -------------------------------------------------------------------------- */
.lp-members-header-icons {
    display: none;
}


/* ==========================================================================
   §2  Page chrome — body bg + global header restyle + utility icons
   ========================================================================== */

/* Body background and default text color on /members/ under the dark flag.
   body.lp-theme-dark only appears on the members page (see lp_members_dark_theme_body_class
   in livingproof-membership.php), so this rule is implicitly page-scoped. */
body.lp-theme-dark {
    background: #000;
    color: #fff;
}

/* Neutralize Elementor container backgrounds so the body black shows through.
   The /members/ page was built with `background_color: globals/colors?id=secondary`
   (light) on its root container; overriding here avoids a full Elementor rebuild.
   Targeting both `elementor-element[data-element_type="container"]` (v3+) and
   legacy `.elementor-section` / `.elementor-container` defensively. */
body.lp-theme-dark .elementor-element[data-element_type="container"],
body.lp-theme-dark .elementor-section,
body.lp-theme-dark .elementor-top-section {
    background-color: transparent !important;
    background-image: none !important;
}

/* The built-in "LIVING PROOF MEMBERS" heading above the feed is redundant
   chrome in the redesign — the global wordmark plus the typographic tab row
   is enough identification. Hide it (display:none, not visibility:hidden, so
   it collapses and does not steal vertical space). */
body.lp-theme-dark .elementor-widget-heading .elementor-heading-title {
    display: none;
}

/* Collapse the gap between the fixed .lp-header and the tab row. The
   /members/ Elementor container was built with 100px top padding (see
   lp_create_members_page) to leave room for the LIVING PROOF MEMBERS
   heading, which the redesign hides. Elementor v3 implements container
   padding via CSS custom properties (e.g. `--padding-top: 100px` on the
   element, consumed by `padding-block-start: var(--padding-top)` in the
   framework CSS with !important). Overriding `padding-top` directly loses
   the cascade war; overriding the variable itself wins regardless. Also
   explicitly zero padding-block-start as a belt-and-suspenders move for
   any version where the variable indirection is not in play.

   The 20px spacer widget that separated heading from feed is redundant
   under the dark flag and hidden outright. */
html body.lp-theme-dark .elementor-section,
html body.lp-theme-dark .elementor-container,
html body.lp-theme-dark .elementor-section > .elementor-container,
html body.lp-theme-dark .elementor-element[data-element_type="container"] {
    --padding-top: 8px !important;
    padding-block-start: 8px !important;
}
body.lp-theme-dark .elementor-widget-spacer {
    display: none !important;
}

/* Global site header: the ACTUAL header on this site is `.lp-header`
   (rendered by lp_render_site_header() in the mu-plugin), NOT Elementor's
   theme-builder header. `.elementor-location-header` is hidden site-wide.
   `.lp-header` defaults to WHITE with a black wordmark — /pricing/ flips
   it to black+white via an inline page-scoped override inside its shortcode
   (see lp_pricing_cards_shortcode at livingproof-membership.php:~1727).
   Replicate the same approach here, scoped under body.lp-theme-dark. The
   `html body.lp-theme-dark` selector gives enough specificity to beat the
   default rule's `filter: none !important` on `.lp-header__logo img`. */
html body.lp-theme-dark .lp-header {
    background: #000 !important;
    background-color: #000 !important;
    box-shadow: none !important;
}
html body.lp-theme-dark .lp-header__logo img {
    filter: brightness(0) invert(1) !important;
}
html body.lp-theme-dark .lp-header__logo span {
    color: #fff !important;
}

/* Utility icons — shown under dark flag. Position fixed to the viewport top-right
   so they read as header-level utility regardless of page scroll. The outer
   container is pointer-events:none so the invisible gap between icons does not
   eat clicks on underlying feed cards; individual icons re-enable pointer events. */
body.lp-theme-dark .lp-members-header-icons {
    display: flex;
    position: fixed;
    top: 22px;
    right: 32px;
    z-index: 10000;
    align-items: center;
    gap: 18px;
    pointer-events: none;
}

body.lp-theme-dark .lp-members-header-icon {
    pointer-events: auto;
    position: relative;
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    padding: 6px;
    margin: -6px;            /* expand hit target without shifting layout */
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    opacity: 0.85;
    transition: opacity 160ms ease;
}

body.lp-theme-dark .lp-members-header-icon:hover,
body.lp-theme-dark .lp-members-header-icon:focus-visible {
    opacity: 1;
    outline: none;
}

body.lp-theme-dark .lp-members-header-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* Avatar icon renders slightly larger to balance visual weight with envelope */
body.lp-theme-dark .lp-members-header-icon--account svg {
    width: 24px;
    height: 24px;
    margin: -1px;
}

/* Unread counter on envelope — small red pill, top-right of icon box */
body.lp-theme-dark .lp-members-header-icon--messages .lp-messages-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
}

/* Hide the badge entirely when the Better Messages counter returns empty.
   The shortcode hides zero via `hide_zero="1"` but wraps output in markup
   regardless; this collapses the empty wrapper visually. */
body.lp-theme-dark .lp-members-header-icon--messages .lp-messages-badge:empty {
    display: none;
}

/* Mobile: tighter positioning so icons do not collide with the wordmark */
@media (max-width: 600px) {
    body.lp-theme-dark .lp-members-header-icons {
        top: 16px;
        right: 16px;
        gap: 14px;
    }
}

/* Hide only the bottom-right floating nav on the dashboard — the in-page
   tab row handles all content categories (radio, magazine, store...) so
   the floating nav is redundant. `.lp-header` is kept visible: it is the
   actual site header (solid black + white wordmark) that renders on every
   page including /pricing/. Earlier versions of this rule also hid
   `.lp-header` on the mistaken assumption that it duplicated Elementor's
   theme-builder header — but Elementor's header is hidden site-wide, so
   `.lp-header` is the ONLY header. */
body.lp-theme-dark .lp-bottomnav {
    display: none !important;
}

/* Cap the whole dashboard wrapper to the same 820px centered column as
   the Account zone. Feed tab row, stream items, grid cards — everything
   inside .lp-members-feed shares the same readable line length. Header
   icons (position:fixed) and logout link (position:absolute to pane)
   remain outside this constraint. */
body.lp-theme-dark .lp-members-feed {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Item 4b — per-category grid sizing (desktop). Magazine/Books/Video/
   Re-Ignition use a 2-col image-led layout; Radio/Archival keep 3-col
   density. Tablet collapses Magazine-set to 2-col, mobile to 1-col.
   Selectors use data-category written by livingproof-feed.js on tab
   click and on initial render. */
@media (min-width: 1025px) {
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-magazine"],
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-video-projects"],
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-reignition"] {
        grid-template-columns: repeat(2, 1fr);
    }
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-radio"],
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-archival"],
    body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-artist-edition-books"] {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Radio/Archival: inherit the base 16:9 thumb aspect. The polish-batch
       4:3 override cropped the bottom-left LIVING PROOF watermark on video
       sources (16:9 > 4:3 = horizontal crop with object-fit: cover). Full
       frame visible at 16:9; cards render slightly shorter as a result. */
}

/* Item 4c — Books thumbnails: 3:4 portrait cells with cover-fit zoom.
   The 3:4 aspect lives on the wrapper <a class="lp-feed-item__thumb-link">,
   not the inner <img>: setting aspect-ratio on the img alone wasn't always
   honored when source images had varying intrinsic dimensions (one card
   would render ~770px tall while siblings rendered ~530px because the
   img's natural height won the layout). Wrapper-as-box + image-fills-wrapper
   forces uniform 3:4 cells across the row. `object-fit: cover` zooms the
   image to fill the cell (~2-5% top/bottom crop on portrait covers) so
   square/landscape thumbs no longer letterbox; no per-card backdrop needed. */
body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-artist-edition-books"] .lp-feed-item--grid .lp-feed-item__thumb-link {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.lp-theme-dark .lp-feed-posts[data-view="grid"][data-category="members-only-artist-edition-books"] .lp-feed-item--grid .lp-feed-item__thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}


/* ==========================================================================
   §3  Tab row — pills → typographic text
   Reshape `.lp-feed-filters` to match the footer nav treatment
   (lowercase, thin sans, spaced, no chrome). Active = full white,
   inactive = 50% muted white. Account/Messages/Dashboard tab buttons
   hidden — their functionality lives in the header utility icons (§6/§7);
   the underlying panes (#lp-account-pane, #lp-messages-pane) are kept
   in the DOM for the icon handlers to toggle.
   ========================================================================== */

/* Reset the filter row: no border-bottom separator, no wrapping, no pill-gap */
body.lp-theme-dark .lp-feed-filters {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2rem;
    gap: 1.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Hide scrollbar — not needed visually; horizontal scroll remains functional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.lp-theme-dark .lp-feed-filters::-webkit-scrollbar {
    display: none;
}

/* Reset the button: no pill chrome. lowercase, thin, spaced typography. */
body.lp-theme-dark .lp-feed-filters button {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: color 180ms ease;
}

/* Active + hover: full white, no chrome (override the light-theme rule that
   sets background+border). */
body.lp-theme-dark .lp-feed-filters button:hover,
body.lp-theme-dark .lp-feed-filters button.active {
    background: transparent;
    border-color: transparent;
    color: #fff;
}

/* Focus ring for accessibility — minimal underline rather than outline ring */
body.lp-theme-dark .lp-feed-filters button:focus-visible {
    outline: none;
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Hide utility tabs under the dark flag. The header icons (§6/§7) are
   the only entry points for Account and Messages in dark mode; the
   Dashboard admin tab is benched until a Phase 2 admin-surface pass. */
body.lp-theme-dark .lp-feed-filters button[data-category="_account"],
body.lp-theme-dark .lp-feed-filters button[data-category="_messages"],
body.lp-theme-dark .lp-feed-filters button[data-category="_dashboard"] {
    display: none;
}

/* Mobile: tighter gap, smaller type so more items fit before scrolling */
@media (max-width: 600px) {
    body.lp-theme-dark .lp-feed-filters {
        gap: 1.25rem;
        margin-bottom: 1.5rem;
    }
    body.lp-theme-dark .lp-feed-filters button {
        font-size: 0.8rem;
    }
}


/* ==========================================================================
   §4  Stream layout (Feed tab) — dark reskin + Option B gated card
   ========================================================================== */

/* --- Stream item base --- */
body.lp-theme-dark .lp-stream-item {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.lp-theme-dark .lp-stream-item__date {
    color: rgba(255, 255, 255, 0.5);
}

body.lp-theme-dark .lp-stream-item__title {
    /* Re-declare font-size/weight at body.lp-theme-dark specificity (0,2,1)
       so the Hello Elementor / Elementor-v3 default h3 rules can't win the
       cascade against the base .lp-stream-item__title rule (0,1,0) and
       blow the title up on the dark surface. */
    font-size: 1.0625rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: #fff;
}

/* composer-v2-feed-parity round 2 (B6): when the wrap-link is suppressed
   for a free-tier video card, the title becomes its own anchor — defend
   against Hello Elementor's accent color on every link state. */
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link,
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link:link,
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link:visited,
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link:hover,
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link:focus,
body.lp-theme-dark .lp-stream-item__title a.lp-stream-item__title-link:active {
    color: inherit !important;
    text-decoration: none !important;
}

body.lp-theme-dark .lp-stream-content {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Flip the truncation gradient fade from → #fff to → #000 so the last line
   of body text fades into the dark page background, not a white sheet. */
body.lp-theme-dark .lp-stream-content--truncated::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
}

body.lp-theme-dark .lp-stream-viewpost {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
body.lp-theme-dark .lp-stream-viewpost:hover {
    color: #fff;
    border-bottom-color: #fff;
}

body.lp-theme-dark .lp-stream-comment-icon {
    color: rgba(255, 255, 255, 0.6);
}
body.lp-theme-dark .lp-stream-item__footer {
    color: rgba(255, 255, 255, 0.6);
}

/* --- Stream item (Phase 2 redesign): thumbnail-only hero, clickable card --- */

body.lp-theme-dark .lp-stream-item__link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 1rem;
    margin: 0 -1rem;
    border-radius: 2px;
    transition: background 160ms ease;
}

body.lp-theme-dark .lp-stream-item__link:hover,
body.lp-theme-dark .lp-stream-item__link:focus {
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    text-decoration: none;
    outline: none;
}

body.lp-theme-dark .lp-stream-item__hero {
    /* Fix 5 — constrain media to 75% of card width and center it. Body
       text below the hero stays at the card's full width (the hero's
       constraint doesn't propagate to siblings). Applies to both image
       posts (.lp-stream-item__thumb) and video posts (the play-btn
       overlay sits position:absolute inside the hero so it re-centers
       within the narrowed box automatically). */
    max-width: 75%;
    margin: 1rem auto;
}

body.lp-theme-dark .lp-stream-item__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
}

body.lp-theme-dark .lp-stream-item__thumb--placeholder {
    background: #111;
}

body.lp-theme-dark .lp-stream-item__teaser {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* Announcement variant: no hero, full content inline, non-clickable */
body.lp-theme-dark .lp-stream-item--announcement .lp-stream-item__teaser {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.75rem;
}

body.lp-theme-dark .lp-stream-item--announcement .lp-stream-item__teaser p {
    margin: 0 0 0.75rem;
}

body.lp-theme-dark .lp-stream-item--announcement {
    cursor: default;
    padding: 1rem 0;
}

/* Pin (single-pin v1) — pinned stream item modifier + meta-row badge.
   Subtle gold-accent border + faint tint; badge sits beside the date in
   .lp-stream-item__header. Only renders on /yamato/members/ News page=1. */
body.lp-theme-dark .lp-stream-item--pinned {
    border: 1px solid rgba(255, 215, 0, 0.28);
    background: rgba(255, 215, 0, 0.035);
    border-radius: 6px;
    padding: 6px 10px;
}
body.lp-theme-dark .lp-stream-item__pin-badge {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    background: rgba(255, 215, 0, 0.18);
    color: #ffd700;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 12px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Library row pin button — see canonical .lp-btn--icon-row + the pin
   --active gold delta inside .lp-creator section (~L9470). Markup at
   livingproof-creator.js:609 applies .lp-btn--icon-row class. */

/* Comment count bubble indicator */
body.lp-theme-dark .lp-comment-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    vertical-align: middle;
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-stream-item__link:hover .lp-comment-indicator {
    color: #fff;
}

body.lp-theme-dark .lp-comment-indicator__bubble {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

body.lp-theme-dark .lp-comment-indicator__count {
    position: relative;
    font-family: 'Onest', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: #ff3b30;
    line-height: 1;
    transform: translateY(-2px);
    pointer-events: none;
}

/* "You're caught up" footer */
body.lp-theme-dark .lp-stream-caught-up {
    max-width: 600px;
    margin: 4rem auto 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

body.lp-theme-dark .lp-stream-caught-up__heading {
    margin: 0 0 0.5rem;
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}

body.lp-theme-dark .lp-stream-caught-up__subtext {
    margin: 0 0 2rem;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

body.lp-theme-dark .lp-stream-caught-up__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

body.lp-theme-dark .lp-stream-caught-up__cat {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-stream-caught-up__cat:hover,
body.lp-theme-dark .lp-stream-caught-up__cat:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

@media (max-width: 600px) {
    body.lp-theme-dark .lp-stream-caught-up {
        margin-top: 2.5rem;
        padding: 1.5rem 1rem;
    }
    body.lp-theme-dark .lp-stream-caught-up__cats {
        gap: 1rem;
    }
    body.lp-theme-dark .lp-stream-item__link {
        padding: 0.75rem;
        margin: 0 -0.75rem;
    }
}

/* ==========================================================================
   §10  Phase 2 stream redesign: short/long variants, lazy play button,
        sticky tab header, feed-only filter, infinite scroll, back-to-top
   ========================================================================== */

/* --- Short card: full content, no hover, no card link wrapper --- */
body.lp-theme-dark .lp-stream-item--short {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Short-post teasers inherit base teaser values (0.9rem / opacity 0.7 /
   line-height 1.5) so all post lengths render at the same body size.
   Read-more affordance becomes the only visible long/short differentiator.
   Announcements (no media) keep the bigger 1rem treatment (rule below)
   as a deliberate accent for text-only updates. */
body.lp-theme-dark .lp-stream-item--short .lp-stream-item__teaser p {
    margin: 0 0 0.75rem;
}

/* Constrain inline images/figures inside ANY teaser (short + long, β scope
   per Siti's probe): figure centered at 75% card width; img inside figure
   fills the figure (no double 75% nesting which left the image at ~56% of
   the card and visually off-center). `!important` on margin-left/right auto
   defeats any potential WP/Elementor `.alignleft` / `.alignnone` rule that
   could float the figure or zero its margins. `float: none` belt-and-
   suspenders against the same. */
body.lp-theme-dark .lp-stream-item__teaser figure {
    display: block !important;
    max-width: 75%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    text-align: center;
}
body.lp-theme-dark .lp-stream-item__teaser figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
/* Bare <img> inside teaser (wpautop wraps in <p>...</p>): centered at 75%
   directly. Less common since the export pipeline emits figure-wrapped
   images, but defended for hand-edited posts. */
body.lp-theme-dark .lp-stream-item__teaser > img,
body.lp-theme-dark .lp-stream-item__teaser p > img {
    display: block;
    max-width: 75%;
    margin: 1rem auto !important;
    float: none !important;
}

body.lp-theme-dark .lp-stream-item--short .lp-stream-item__teaser img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
    cursor: zoom-in;
    transition: opacity 160ms ease;
}

body.lp-theme-dark .lp-stream-item--short .lp-stream-item__teaser img:hover {
    opacity: 0.92;
}

body.lp-theme-dark .lp-stream-item--short .lp-stream-item__teaser figure {
    margin: 1rem auto;
}

/* Non-video hero thumb on long posts — lightbox-able */
body.lp-theme-dark .lp-stream-item__thumb.lp-lightbox-img {
    cursor: zoom-in;
    transition: opacity 160ms ease;
}

body.lp-theme-dark .lp-stream-item__thumb.lp-lightbox-img:hover {
    opacity: 0.92;
}

/* Lightbox modal */
.lp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 200ms ease;
    cursor: zoom-out;
    touch-action: pinch-zoom;
}

.lp-lightbox.lp-lightbox--open {
    opacity: 1;
}

.lp-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    display: block;
    cursor: default;
}

/* `all: unset` defeats Hello Elementor's button accent (otherwise the
   close chip renders with the global pink/magenta border). Style is
   re-declared explicitly below the unset to keep the cascade clean. */
.lp-lightbox .lp-lightbox__close,
button.lp-lightbox__close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 160ms ease, opacity 160ms ease;
}

.lp-lightbox .lp-lightbox__close:hover,
.lp-lightbox .lp-lightbox__close:focus,
.lp-lightbox .lp-lightbox__close:focus-visible {
    color: #fff;
    outline: none;
}

.lp-lightbox__close svg {
    display: block;
}

@media (max-width: 600px) {
    .lp-lightbox {
        padding: 0.75rem;
    }
    .lp-lightbox__close {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* --- Long card: truncated teaser with fade + Read more link --- */
body.lp-theme-dark .lp-stream-item--long .lp-stream-item__teaser {
    position: relative;
    overflow: hidden;
    max-height: 4.8em;
}

body.lp-theme-dark .lp-stream-item--long .lp-stream-item__teaser--truncated::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2em;
    background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
    pointer-events: none;
}

body.lp-theme-dark .lp-stream-item__read-more {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-stream-item__link:hover .lp-stream-item__read-more,
body.lp-theme-dark .lp-stream-item__link:focus .lp-stream-item__read-more {
    color: #fff;
}

/* composer-v2-feed-parity round 2 (B6): standalone read-more anchor (rendered
   when the wrap-link is suppressed for free-tier video cards). Defend the
   muted-link styling against Hello Elementor's link accent. */
body.lp-theme-dark a.lp-stream-item__read-more--standalone,
body.lp-theme-dark a.lp-stream-item__read-more--standalone:link,
body.lp-theme-dark a.lp-stream-item__read-more--standalone:visited,
body.lp-theme-dark a.lp-stream-item__read-more--standalone:active {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}
body.lp-theme-dark a.lp-stream-item__read-more--standalone:hover,
body.lp-theme-dark a.lp-stream-item__read-more--standalone:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* --- Lazy play button overlay on video thumbnails --- */
body.lp-theme-dark .lp-stream-item__hero {
    position: relative;
}

/* composer-v2-feed-parity round 3 (B4): unified play button rule shared by
   .lp-stream-play-btn (feed grid hero) and .lp-bunny-video-thumb__play
   (post-body video thumbnail — see lines ~10815). Small dark/translucent
   circle, white triangle inside. Visual parity between free and paid; only
   post-click behavior differs. `all: unset` defends against Elementor's
   button reset. backdrop-filter intentionally omitted — iOS 3D-context
   trap per CLAUDE.md "Frontend gotchas". Unscoped from body.lp-theme-dark
   in round 3 since these classes only appear inside members-feed surfaces
   anyway, and B4 fixes required the rule to apply uniformly across all
   surfaces (category-tab post-detail bug a). */
.lp-stream-play-btn,
button.lp-stream-play-btn {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4) !important; /* defeats Elementor button accent baseline */
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 160ms ease, background 160ms ease;
    z-index: 2;
}

.lp-stream-play-btn:hover,
.lp-stream-play-btn:focus,
.lp-stream-play-btn:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(0, 0, 0, 0.55) !important; /* defeats Elementor button:hover accent */
    outline: none;
}

.lp-stream-play-btn svg {
    transform: translateX(2px); /* nudge play triangle visually centered */
}

.lp-stream-play-btn--loading {
    opacity: 0.5;
    cursor: wait;
}

.lp-stream-play-btn--error {
    background: rgba(255, 59, 48, 0.3);
}

body.lp-theme-dark .lp-stream-item__hero--playing {
    aspect-ratio: 16 / 9;
    padding: 0;
}

body.lp-theme-dark .lp-stream-item__hero--playing iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    border: 0;
    position: relative !important;
}

/* --- Tab row + filter header (no sticky/pinning — scrolls with content) --- */
body.lp-theme-dark .lp-feed-header {
    background: #000;
    padding: 0.75rem 0 0.5rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Filter icon + popover (stream only — CSS hides outside on-stream state) */
body.lp-theme-dark .lp-stream-filter {
    display: none;
    position: relative;
    margin-left: auto; /* push to right end of tab row flex container */
}

body.lp-theme-dark .lp-feed-header--on-stream .lp-stream-filter {
    display: inline-flex;
    align-items: center;
}

/* Hide the filter when the inline post detail view is open */
body.lp-theme-dark .lp-feed-header--detail-open .lp-stream-filter {
    display: none !important;
}

body.lp-theme-dark .lp-stream-filter__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-stream-filter__icon:hover,
body.lp-theme-dark .lp-stream-filter__icon:focus,
body.lp-theme-dark .lp-stream-filter__icon[aria-expanded="true"] {
    color: #fff;
    outline: none;
}

body.lp-theme-dark .lp-stream-filter__dot {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff3b30;
}

body.lp-theme-dark .lp-stream-filter--active .lp-stream-filter__dot {
    display: block;
}

body.lp-theme-dark .lp-stream-filter__popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    padding: 0.75rem 1rem;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    z-index: 9999;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.lp-theme-dark .lp-stream-filter__popover[hidden] {
    display: none;
}

body.lp-theme-dark .lp-stream-filter__opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.7);
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-stream-filter__opt:hover {
    color: #fff;
}

body.lp-theme-dark .lp-stream-filter__opt input {
    accent-color: #fff;
    margin: 0;
}

body.lp-theme-dark .lp-stream-filter__group {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.4);
}

/* --- Infinite-scroll sentinel (invisible, sits at end of posts) --- */
body.lp-theme-dark .lp-stream-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

/* --- End of stream indicator --- */
body.lp-theme-dark .lp-stream-end {
    text-align: center;
    margin: 3rem 0 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

/* --- Back-to-top floating button --- */
body.lp-theme-dark .lp-scrollup {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 160ms ease, color 160ms ease, border-color 160ms ease;
    z-index: 9990;
}

body.lp-theme-dark .lp-scrollup--visible {
    opacity: 1;
    pointer-events: auto;
}

body.lp-theme-dark .lp-scrollup:hover,
body.lp-theme-dark .lp-scrollup:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.08);
    outline: none;
}

@media (max-width: 600px) {
    .lp-stream-play-btn {
        width: 48px;
        height: 48px;
    }
    body.lp-theme-dark .lp-scrollup {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 40px;
        height: 40px;
    }
    body.lp-theme-dark .lp-feed-header {
        padding: 0.5rem 1rem;
    }
}


/* ==========================================================================
   §5  Grid layout (category tabs) — dark reskin, NO gating (teaser)
   Free members see every thumbnail. Click-through on a paid post hits the
   existing single-post paywall. The asymmetry vs stream (blurred on stream,
   unblurred on grid) is deliberate: stream = "here is a tease of what you
   are missing", grid = "browse the archive to see what you would unlock".
   ========================================================================== */

/* --- Grid card --- */
body.lp-theme-dark .lp-feed-item--grid .lp-feed-item__thumb {
    border-radius: 0;
}

body.lp-theme-dark .lp-feed-item__thumb--placeholder {
    /* #111 bg already dark — no change needed; icon stays */
    background: #111;
}

body.lp-theme-dark .lp-feed-item--grid .lp-feed-item__title {
    font-weight: 400;
    font-size: 0.875rem; /* 14px — categorical grid cards are denser than feed */
    /* Re-declare line-height at body.lp-theme-dark specificity (0,3,0) so
       Elementor's `.elementor-widget-shortcode h3` rule (~0,1,1) can't win
       and balloon two-line titles to ~25px between baselines. */
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0.1em;
}

body.lp-theme-dark .lp-feed-item__title a {
    color: #fff;
}
body.lp-theme-dark .lp-feed-item__title a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.lp-theme-dark .lp-feed-item__date {
    color: rgba(255, 255, 255, 0.5);
}

body.lp-theme-dark .lp-feed-item__excerpt {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Search bar (above category grids) --- */
body.lp-theme-dark .lp-feed-search__input {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.lp-theme-dark .lp-feed-search__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

body.lp-theme-dark .lp-feed-search__input:focus {
    border-color: #fff;
}

/* Fix 4 — replace browser-default blue/gray clear chip with a white SVG
   matching the dark surface. WebKit-only; Firefox doesn't render a
   cancel button on type="search" (acceptable; no fallback needed). */
body.lp-theme-dark .lp-feed-search__input::-webkit-search-cancel-button,
body.lp-theme-dark .lp-feed-search__input::-webkit-search-clear-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    opacity: 0.6;
}
body.lp-theme-dark .lp-feed-search__input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* --- Load More button --- */
body.lp-theme-dark .lp-load-more {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

body.lp-theme-dark .lp-load-more:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

body.lp-theme-dark .lp-load-more:disabled {
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- Empty state --- */
body.lp-theme-dark .lp-feed-empty {
    color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   §8  Audio player — dark skin for native HTML5 <audio>
   Radio content renders via [bunny_audio] which uses <audio controls>.
   The native Chromium / WebKit player chrome is light gray; `filter:
   invert()` flips it to dark, `hue-rotate` corrects the shifted scrub
   slider color. Good-enough cross-browser without a custom player.
   ========================================================================== */

body.lp-theme-dark .lp-audio-wrapper audio {
    filter: invert(0.85) hue-rotate(180deg);
    border-radius: 0;
}

body.lp-theme-dark .lp-audio-title {
    color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   §6  Messages slide-over right panel
   Repositions the pre-rendered #lp-messages-pane (which in light theme is a
   tab-activated content swap) into a fixed right-edge slide-over. The
   envelope header icon (§2) triggers `.is-open` via the JS handler in
   livingproof-feed.js. Backdrop dims the feed; click-outside / X / Esc
   all close.

   Panel header (title + close button) is always emitted in PHP but
   hidden via CSS in light theme so the tab-activated pane in light
   mode shows only the Better Messages content (no redundant "Messages"
   title since the tab label already says that).
   ========================================================================== */

/* Hide the injected panel header in light theme (no-op for current users) */
.lp-messages-panel-header,
.lp-messages-panel-backdrop {
    display: none;
}

/* === Dark-theme slide-over panel === */

body.lp-theme-dark #lp-messages-pane {
    /* Override the inline style="display:none" with !important so transform
       translateX(100%) can keep it off-screen by default instead of removing
       it from layout entirely. Transform animates in on .is-open. */
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    padding: 4.5rem 1.5rem 1.5rem;
    /* Translucent dark panel with backdrop blur — matches the mobile-nav
       hamburger-contained-in-header treatment elsewhere on the site. The
       backdrop div also dims the feed behind, so the layered look reads as
       a frosted glass overlay rather than a solid slab. */
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #fff;
    z-index: 10001;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -2px 0 24px rgba(0, 0, 0, 0.4);
}

body.lp-theme-dark #lp-messages-pane.is-open {
    transform: translateX(0);
}

/* Backdrop behind the panel */
body.lp-theme-dark .lp-messages-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

body.lp-theme-dark .lp-messages-panel-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel header: title + close button */
body.lp-theme-dark .lp-messages-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: 1.5rem;
}

/* Title matches the tab-row typography: lowercase, thin Onest,
   letter-spaced — consistent language across all dashboard chrome. */
body.lp-theme-dark .lp-messages-panel-title {
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    margin: 0;
}

body.lp-theme-dark .lp-messages-panel-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-messages-panel-close:hover,
body.lp-theme-dark .lp-messages-panel-close:focus-visible {
    color: #fff;
    outline: none;
}

/* Better Messages: we activate the plugin's NATIVE dark theme by swapping
   `bm-messages-light` → `bm-messages-dark` on the body (see
   lp_swap_bm_theme_for_dark in livingproof-membership.php). Plugin's own
   CSS handles dark colors. No internal chrome overrides needed — the
   less we patch over BM's internals, the more resilient this is to
   plugin updates. */

body.lp-theme-dark #lp-messages-pane .lp-messages-dm-btn {
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Better Messages — LP-integration overrides (Tier 1: structural)
   Scoped to #lp-messages-pane so nothing leaks to BM usage elsewhere.
   BM's native dark theme handles colors; we only flatten chrome and
   hide redundant/destructive actions.
   -------------------------------------------------------------------------- */

/* Flatten BM's own container + chat-header fills so the conversation
   reads as floating on the frosted panel, not a panel-within-panel. */
body.lp-theme-dark #lp-messages-pane .bp-messages-wrap,
body.lp-theme-dark #lp-messages-pane .bp-messages-wrap .chat-header {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hide all chat-header action buttons (expand, settings/⋮ dropdown,
   in-chat search). The ⋮ dropdown's only useful action is "Delete
   conversation" — destructive and never needed from the member side.
   Expand/search are redundant inside a 400px dedicated panel. Composer
   and emoji picker stay untouched. */
body.lp-theme-dark #lp-messages-pane .chat-header .thread-actions,
body.lp-theme-dark #lp-messages-pane .chat-header .settings,
body.lp-theme-dark #lp-messages-pane .chat-header .bpbm-maximize,
body.lp-theme-dark #lp-messages-pane .chat-header .bpbm-minimize,
body.lp-theme-dark #lp-messages-pane .chat-header .bm-search-btn,
body.lp-theme-dark #lp-messages-pane .chat-header .bpbm-search {
    display: none !important;
}

/* Hide BM's "Conversation information" overlay entirely. That overlay is
   what renders when a user clicks the partner avatar in the chat header,
   and it contains Mute + Delete buttons whose classes are Vue-generated
   (not in BM's CSS file) — so class-specific hiding does not reach them.
   Nuking the whole `.bm-thread-settings` panel kills both destructive
   actions and the admin's attachments view in one stroke. Attachment
   viewing is low-value for a 1:1 member-creator DM; logged as a follow-up
   in vault/Tasks.md if admin workflow needs it. */
body.lp-theme-dark .bm-thread-settings,
body.lp-theme-dark .bm-thread-settings-container {
    display: none !important;
}

/* Belt-and-suspenders: also disable click on the entire chat-header's
   thread-info block (wraps avatar + name + any metadata). For admins,
   the BM destination is the empty info panel above (now hidden), not
   a WP profile, so the click has no useful destination either way. */
body.lp-theme-dark #lp-messages-pane .chat-header .thread-info,
body.lp-theme-dark #lp-messages-pane .chat-header .thread-info * {
    pointer-events: none !important;
    cursor: default !important;
}

/* --------------------------------------------------------------------------
   Better Messages — LP-integration overrides (Tier 2: typography)
   Align BM chat chrome with the tab-row / panel-title typography so the
   chat reads as part of the dashboard, not a dropped-in plugin UI.
   -------------------------------------------------------------------------- */

/* Display name (partner's username at top of thread) → lowercase Onest 400 */
body.lp-theme-dark #lp-messages-pane .chat-header .thread-info,
body.lp-theme-dark #lp-messages-pane .chat-header .thread-info .bm-chat-header-title,
body.lp-theme-dark #lp-messages-pane .chat-header .thread-info .thread-info-data {
    font-family: 'Onest', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    color: #fff !important;
}

/* Date dividers ("Today", "Yesterday", explicit dates) — flatten from
   BM's pill treatment to a quiet inline timestamp. */
body.lp-theme-dark #lp-messages-pane .bm-sticky-date {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.25rem 0 !important;
    box-shadow: none !important;
}

/* "Start of conversation" / system-event label above the first message */
body.lp-theme-dark #lp-messages-pane .bm-before-message-list,
body.lp-theme-dark #lp-messages-pane .bm-before-message-list * {
    color: rgba(255, 255, 255, 0.4) !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.7rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1em !important;
}

/* Per-message timestamps (e.g. 20:58) → smaller, Onest. Color BLACK because
   they are rendered inside BM's message bubbles which retain BM's native
   white fill for received messages; a muted-white timestamp on a white
   bubble is invisible. */
body.lp-theme-dark #lp-messages-pane .bm-time {
    color: rgba(0, 0, 0, 0.5) !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

/* --- Composer: flatten BM's blue-gray fill. The actual composer wrapper is
   `.bm-reply`, not `.chat-footer` (which is a different header-adjacent
   element). Both the wrapper and its direct children carry the BM bg
   color, so both need flattening. */
body.lp-theme-dark #lp-messages-pane .bp-messages-wrap .bm-reply,
body.lp-theme-dark #lp-messages-pane .bp-messages-wrap .bm-reply > * {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
/* Input field inside the composer: transparent, white text */
body.lp-theme-dark #lp-messages-pane .bm-reply input[type="text"],
body.lp-theme-dark #lp-messages-pane .bm-reply textarea,
body.lp-theme-dark #lp-messages-pane .bm-reply [contenteditable="true"] {
    background: transparent !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
}
body.lp-theme-dark #lp-messages-pane .bm-reply input::placeholder,
body.lp-theme-dark #lp-messages-pane .bm-reply textarea::placeholder,
body.lp-theme-dark #lp-messages-pane .bm-reply [contenteditable="true"]:empty::before {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* --- Disable avatar click-through for non-admin members across the whole
   panel (chat-header partner avatar AND inline per-message sender avatars).
   Avatars wrap in <a> links to the user's profile page; members DMing the
   creator have no use for either link. Admins keep click-through — the
   destination surfaces the other user's profile (name/address/tier) which
   is useful for support conversations. Scope via :not(.lp-is-admin) on
   the body; lp_members_dark_theme_body_class adds lp-is-admin when the
   current user has manage_options. */
body.lp-theme-dark:not(.lp-is-admin) #lp-messages-pane .avatar,
body.lp-theme-dark:not(.lp-is-admin) #lp-messages-pane .avatar a {
    pointer-events: none !important;
    cursor: default !important;
}

/* --- Emoji picker: z-index raise + LP integration --- */
/* BM's emoji picker has z-index:801 and mounts at the body level; our panel
   lives at z-index:10001, so the picker opens behind it. Raise it above. */
body.lp-theme-dark .bm-emoji-picker-container {
    z-index: 10002 !important;
    /* Match the panel's frosted aesthetic: same translucent dark bg + blur,
       thin white-rgba border, no BM default blue-tinted chrome. */
    --rgb-background: 10, 10, 10 !important;
    --rgb-color: 255, 255, 255 !important;
    --rgb-accent: 255, 255, 255 !important;
    --rgb-input: 20, 20, 20 !important;
    --color-border: rgba(255, 255, 255, 0.08) !important;
    background: rgba(10, 10, 10, 0.92) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   §7  Account pane takeover
   Avatar header icon reveals #lp-account-pane as a full takeover of the
   feed area. Tab row + header stay visible; clicking a tab or Esc closes.
   Unlike Messages, MemberPress does not ship a native dark theme, so this
   section has more scoped overrides than §6 did.
   ========================================================================== */

/* When takeover is open: hide feed-posts, search, load-more, AND the tab row
   (tabs are not visually relevant inside the Account view; clicking one
   closes the takeover, but we want it to feel like a mode change — not a
   visual with two nav surfaces competing for attention). */
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .lp-feed-posts,
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .lp-feed-search,
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .lp-load-more-wrap,
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .lp-feed-filters {
    display: none !important;
}

/* composer-v2-feed-parity round 2 (B5): when the user clicks the account
   icon while reading a post (#lp-post-detail-pane open from a category-tab
   click), the takeover-class hide list above did NOT include the detail
   pane, so it floated underneath/alongside #lp-account-pane. Close it
   visually here AND the JS in livingproof-feed.js dispatches
   `lp:close-post-detail` to swap-route URL state cleanly. Belt-and-
   suspenders: CSS hides immediately even if the JS event misfires. */
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open #lp-post-detail-pane {
    display: none !important;
}

/* Hide MP's "Welcome to Living Proof New York" greeting — redundant chrome
   since the user already knows they are logged in and on the dashboard. */
body.lp-theme-dark #mepr-account-welcome-message {
    display: none !important;
}

body.lp-theme-dark .lp-members-feed.lp-account-takeover-open #lp-account-pane {
    display: block !important;
}
/* Force-hide the pane when takeover is closed. Belt-and-suspenders: the
   pane's initial inline `style="display:none"` should suffice, but in
   practice other tab-handler code or plugin JS can flip it to display:block
   and leave it that way after the tab is deselected. Explicit hide under
   :not(.lp-account-takeover-open) ensures the pane collapses whenever the
   takeover isn't active. */
body.lp-theme-dark .lp-members-feed:not(.lp-account-takeover-open) #lp-account-pane {
    display: none !important;
}
/* When openLpAccountModal stamps <html> with .lp-account-modal-open (e.g.
   paid-post CTA Join click without first opening the Account tab), surface
   #lp-account-pane so the modal nested inside it can render. Specificity
   (0,3,4) + !important beats the :not(.lp-account-takeover-open) hide rule
   above (0,3,3) + !important. JS class is added in openLpAccountModal and
   removed in closeLpAccountModal — see livingproof-feed.js. */
html.lp-account-modal-open body.lp-theme-dark .lp-members-feed #lp-account-pane {
    display: block !important;
}

/* Active state on the avatar icon when takeover is open — white at full
   opacity + subtle underline to signal "you are here". */
body.lp-theme-dark .lp-members-header-icon--account.is-active {
    opacity: 1;
}
body.lp-theme-dark .lp-members-header-icon--account.is-active::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -6px;
    height: 1px;
    background: #fff;
}

/* --- MemberPress account form styling (modal join-form language) --- */

body.lp-theme-dark #lp-account-pane {
    background: transparent;
    color: #fff;
    padding-top: 0;
    /* Cap the whole Account zone to a readable column width centered in
       the dashboard. Every sub-view (account form, subscriptions table,
       payments table) shares this width, so switching between them is
       visually quiet. All values !important so later inner-normalization
       rules do not override. */
    width: auto !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Override baseline sidebar flex layout. Light-theme CSS at line ~2804
       sets this pane to `display: flex` with a sticky 180px sidebar nav.
       Dark theme uses a horizontal nav on top + full-width content stacked
       below, so flatten to block. */
    display: block !important;
    gap: 0 !important;
}

/* The Elementor container on /members/ has `align-items: center` on a
   flex-column, which causes its flex children (our shortcode widget) to
   size to intrinsic content width rather than stretch to fill — that
   manifests as a narrow "account form" because MP's inputs are the
   intrinsic sizing signal. Force the full chain of ancestor wrappers
   to stretch/100% under the dark flag so the pane actually fills
   the 1200px container. */
body.lp-theme-dark .elementor-widget-shortcode,
body.lp-theme-dark .elementor-widget-shortcode > .elementor-widget-container,
body.lp-theme-dark .elementor-widget-shortcode .elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}
body.lp-theme-dark .elementor-element.elementor-element-lpm1,
body.lp-theme-dark .elementor-element.elementor-element-lpm1 > .e-con-inner {
    align-items: stretch !important;
}

/* Reset the baseline sidebar sizing on the nav — in dark theme it's a
   horizontal row on top, not a 180px sticky left column. */
body.lp-theme-dark #lp-account-pane #mepr-account-nav {
    flex: none !important;
    position: static !important;
    top: auto !important;
    width: 100% !important;
}

/* Normalize INNER content to 100% of the pane. The pane itself is capped
   to 820px centered (see rule above) — these rules only ensure the nav,
   form, tables fill that 820px container; they do NOT override the
   pane's own max-width cap (which stays 820px). */
body.lp-theme-dark #lp-account-pane > *,
body.lp-theme-dark #lp-account-pane .mp_wrapper,
body.lp-theme-dark #lp-account-pane .mepr-account-form,
body.lp-theme-dark #lp-account-pane .mepr-account-table,
body.lp-theme-dark #lp-account-pane #mepr-account-nav,
body.lp-theme-dark #lp-account-pane .mepr-signup-form,
body.lp-theme-dark #lp-account-pane table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Kill MP's sidebar layout on .mp_wrapper — force plain block column so
   nav (now horizontal on top) stacks above the form at full width. */
body.lp-theme-dark #lp-account-pane .mp_wrapper {
    display: block !important;
    grid-template-columns: none !important;
    flex-direction: column !important;
}

/* Account nav (Home / Subscriptions / Payments) — horizontal row, typographic
   treatment mirroring the tab row. MP renders this as a <ul> inside
   #mepr-account-nav > ul with default list bullets + stacked <li> items. */
body.lp-theme-dark #lp-account-pane #mepr-account-nav {
    margin-bottom: 2rem;
}
body.lp-theme-dark #lp-account-pane #mepr-account-nav ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1rem !important;
}
body.lp-theme-dark #lp-account-pane .mepr-nav-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
}
body.lp-theme-dark #lp-account-pane .mepr-nav-item a {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: color 180ms ease;
}
/* Active state: MP's helper marks the current item with class
   `mepr-active-nav-tab` (not `active`). Also cover legacy `.active`
   and `.current-menu-item` for defensive matching. */
body.lp-theme-dark #lp-account-pane .mepr-nav-item:hover a,
body.lp-theme-dark #lp-account-pane .mepr-nav-item.active a,
body.lp-theme-dark #lp-account-pane .mepr-nav-item.mepr-active-nav-tab a,
body.lp-theme-dark #lp-account-pane .mepr-nav-item.mepr-active-nav-tab,
body.lp-theme-dark #lp-account-pane a.mepr-active-nav-tab {
    color: #fff !important;
}

/* Hide MP's auto-emitted Logout item in the nav — we have our own
   logout link pinned below the pane (#lp-account-logout). The duplicate
   in the nav row crowds the horizontal list. */
body.lp-theme-dark #lp-account-pane .mepr-nav-item a#mepr-account-logout,
body.lp-theme-dark #lp-account-pane .mepr-nav-item:has(#mepr-account-logout) {
    display: none !important;
}

/* Form rules mirror the join-modal on /pricing/ (`body.lp-modal-mode` rules
   inlined in lp_pricing_cards_shortcode around PHP line 7770). Same sizing,
   typography, and underline-only treatment — consistent form language
   across every LP form. */

/* Form rows — tight vertical rhythm so the full address block fits the
   viewport without feeling sparse. 18px → 12px plus label-to-input gap
   2px (reduced from 4px below) cuts overall form height ~25%. */
body.lp-theme-dark #lp-account-pane .mp-form-row {
    margin-bottom: 12px !important;
    padding: 0 !important;
    position: relative !important;
}
body.lp-theme-dark #lp-account-pane fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.lp-theme-dark #lp-account-pane legend {
    display: none !important;
}

/* Labels: lowercase, small, muted white. Kill MP's floating-label behavior. */
body.lp-theme-dark #lp-account-pane label,
body.lp-theme-dark #lp-account-pane .mp-form-label,
body.lp-theme-dark #lp-account-pane .mp-form-label label,
body.lp-theme-dark #lp-account-pane label.placeholder-text,
body.lp-theme-dark #lp-account-pane label.placeholder-text.active {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    margin: 0 0 2px !important;
    display: block !important;
    width: auto !important;
    line-height: 1.3 !important;
}

/* Inputs — underline only, transparent, no surrounding box */
body.lp-theme-dark #lp-account-pane input[type="text"],
body.lp-theme-dark #lp-account-pane input[type="email"],
body.lp-theme-dark #lp-account-pane input[type="password"],
body.lp-theme-dark #lp-account-pane input[type="tel"],
body.lp-theme-dark #lp-account-pane input[type="number"],
body.lp-theme-dark #lp-account-pane input[type="url"],
body.lp-theme-dark #lp-account-pane select,
body.lp-theme-dark #lp-account-pane textarea,
body.lp-theme-dark #lp-account-pane .mepr-form-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.9rem !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.6 !important;
}
body.lp-theme-dark #lp-account-pane input:focus,
body.lp-theme-dark #lp-account-pane select:focus,
body.lp-theme-dark #lp-account-pane textarea:focus {
    border-bottom-color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}
body.lp-theme-dark #lp-account-pane input::placeholder,
body.lp-theme-dark #lp-account-pane textarea::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}
/* Override autofill yellow-background */
body.lp-theme-dark #lp-account-pane input:-webkit-autofill,
body.lp-theme-dark #lp-account-pane input:-webkit-autofill:hover,
body.lp-theme-dark #lp-account-pane input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}
/* Country/select dropdown chevron (inline SVG data URI, white at 70%) */
body.lp-theme-dark #lp-account-pane select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='white' opacity='0.7' d='M5 6L0 0h10z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    padding-right: 18px !important;
}
body.lp-theme-dark #lp-account-pane select option {
    background: #111 !important;
    color: #fff !important;
}

/* Submit buttons — outlined, lowercase, match modal */
body.lp-theme-dark #lp-account-pane input[type="submit"],
body.lp-theme-dark #lp-account-pane button[type="submit"],
body.lp-theme-dark #lp-account-pane .mepr-submit,
body.lp-theme-dark #lp-account-pane .mepr-share-button {
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 32px !important;
    margin: 24px 0 0 !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 120px !important;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
body.lp-theme-dark #lp-account-pane input[type="submit"]:hover,
body.lp-theme-dark #lp-account-pane button[type="submit"]:hover,
body.lp-theme-dark #lp-account-pane .mepr-submit:hover,
body.lp-theme-dark #lp-account-pane .mepr-share-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
}

/* Errors — red, smaller */
body.lp-theme-dark #lp-account-pane .cc-error,
body.lp-theme-dark #lp-account-pane .mepr_error,
body.lp-theme-dark #lp-account-pane .invalid-feedback {
    color: #ff7070 !important;
    background: transparent !important;
    font-size: 0.7rem !important;
    margin-top: 4px !important;
    padding: 0 !important;
    font-family: 'Onest', sans-serif !important;
    text-transform: none !important;
}

/* Success banner ("Your account has been saved.") — dark green. MP renders
   the message via shared/errors.php as `<div class="mepr_updated">...</div>`. */
body.lp-theme-dark #lp-account-pane .mepr_updated {
    background: rgba(22, 74, 37, 0.35) !important;
    border: 1px solid rgba(46, 140, 74, 0.4) !important;
    color: #8ed49f !important;
    padding: 0.8rem 1rem !important;
    margin: 0 0 1.5rem !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
}

/* "Change Password" — render as a sibling button beside "Save Profile"
   rather than a text link below. MP's home.php emits both inside the form
   with a mepr_spacer between (the spacer is hidden elsewhere). Inline-block
   both submit + change-password span, match outlined button vocabulary. */
body.lp-theme-dark #lp-account-pane .mepr-submit,
body.lp-theme-dark #lp-account-pane .mepr-share-button,
body.lp-theme-dark #lp-account-pane input[type="submit"],
body.lp-theme-dark #lp-account-pane button[type="submit"] {
    margin-right: 0.75rem !important;
    vertical-align: middle !important;
}
body.lp-theme-dark #lp-account-pane .mepr-account-change-password {
    display: inline-block !important;
    margin: 24px 0 0 !important;
    vertical-align: middle !important;
}
body.lp-theme-dark #lp-account-pane .mepr-account-change-password a {
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    padding: 8px 32px !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    min-width: 120px !important;
    text-align: center !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
body.lp-theme-dark #lp-account-pane .mepr-account-change-password a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Data tables (Subscriptions, Payments) → striped dark */
body.lp-theme-dark #lp-account-pane .mepr-account-table,
body.lp-theme-dark #lp-account-pane table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    color: #fff !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.85rem !important;
}
body.lp-theme-dark #lp-account-pane .mepr-account-table th,
body.lp-theme-dark #lp-account-pane table th {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 0.8rem 0.6rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body.lp-theme-dark #lp-account-pane .mepr-account-table td,
body.lp-theme-dark #lp-account-pane table td {
    background: transparent !important;
    color: #fff !important;
    padding: 0.8rem 0.6rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.lp-theme-dark #lp-account-pane .mepr-alt-row td,
body.lp-theme-dark #lp-account-pane table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Section headings (Subscriptions, Payments, Home) — hidden entirely.
   The active tab in the nav row already labels the current sub-view, so
   rendering "subscriptions" or "payments" again as a heading below the
   nav is redundant chrome. display:none rather than just font-size:0
   so the surrounding whitespace also collapses. */
body.lp-theme-dark #lp-account-pane h1,
body.lp-theme-dark #lp-account-pane h2,
body.lp-theme-dark #lp-account-pane h3,
body.lp-theme-dark #lp-account-pane h4,
body.lp-theme-dark #lp-account-pane .entry-title,
body.lp-theme-dark #lp-account-pane .page-title,
body.lp-theme-dark #lp-account-pane .mepr-account-title,
body.lp-theme-dark #lp-account-pane .mepr-section-heading {
    display: none !important;
    margin: 0 !important;
}

/* Hide MP's page title emitted BY THE THEME wrapping the pane (not by MP
   itself). Some WP themes dump an <h1 class="entry-title"> outside the
   shortcode that says "Subscriptions" / "Payments" — redundant since MP
   itself also emits a heading inside, and the left rail already names
   the section. */
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .entry-header,
body.lp-theme-dark .lp-members-feed.lp-account-takeover-open .page-header {
    display: none !important;
}

/* Search input inside the picker: transparent bg, white text, muted placeholder */
body.lp-theme-dark .bm-emoji-picker-container input[type="text"],
body.lp-theme-dark .bm-emoji-picker-container input[type="search"],
body.lp-theme-dark .bm-emoji-picker-container [contenteditable="true"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-family: 'Onest', sans-serif !important;
}
body.lp-theme-dark .bm-emoji-picker-container input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Section headers ("Frequently used", "Smileys & People", etc.) → Onest muted */
body.lp-theme-dark .bm-emoji-picker-container h2,
body.lp-theme-dark .bm-emoji-picker-container h3,
body.lp-theme-dark .bm-emoji-picker-container [class*="category"] {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: 'Onest', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

/* Mobile: panel spans full viewport width */
@media (max-width: 600px) {
    body.lp-theme-dark #lp-messages-pane {
        width: 100vw;
    }
}


/* ==========================================================================
   §9  Inline post detail view (grid category tabs — dark theme only)

   Click a grid card → feed fades out, detail pane fades in. Single-column
   layout handles every post type: video-only (Video, Archival), image-heavy
   Q&A (Magazine), item catalogs (Re-ignition), hero-image + description
   (Books), video + bio (Radio). Gated posts render the blurred-lock
   treatment from §4 adapted to the pane surface.
   ========================================================================== */

body.lp-theme-dark #lp-post-detail-pane {
    max-width: 1050px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    opacity: 0;
    transition: opacity 250ms ease;
}

body.lp-theme-dark #lp-post-detail-pane.lp-post-detail-pane--open {
    opacity: 1;
}

body.lp-theme-dark .lp-post-detail-back {
    position: sticky;
    top: 76px;
    z-index: 10;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease;
}

body.lp-theme-dark .lp-post-detail-back:hover,
body.lp-theme-dark .lp-post-detail-back:focus {
    color: #fff;
    outline: none;
}

body.lp-theme-dark .lp-post-detail__title {
    margin: 0 0 0.5rem;
    font-family: 'Onest', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

body.lp-theme-dark .lp-post-detail__date {
    display: block;
    margin-bottom: 2rem;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
}

body.lp-theme-dark .lp-post-detail__loading {
    padding: 3rem 0;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* Post body: paragraphs, figures, iframes, links, lists */
body.lp-theme-dark .lp-post-detail__content {
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

body.lp-theme-dark .lp-post-detail__content p {
    margin: 0 0 1.25rem;
}

body.lp-theme-dark .lp-post-detail__content strong {
    color: #fff;
}

body.lp-theme-dark .lp-post-detail__content em {
    font-style: italic;
}

body.lp-theme-dark .lp-post-detail__content a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.lp-theme-dark .lp-post-detail__content figure {
    margin: 2rem 0;
}

body.lp-theme-dark .lp-post-detail__content figure img,
body.lp-theme-dark .lp-post-detail__content img {
    display: block;
    width: 100%;
    height: auto;
}

body.lp-theme-dark .lp-post-detail__content iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    margin: 0 0 2rem;
}

body.lp-theme-dark .lp-post-detail__content audio {
    display: block;
    width: 100%;
    margin: 0 0 2rem;
}

body.lp-theme-dark .lp-post-detail__content .has-text-align-center {
    text-align: center;
}

body.lp-theme-dark .lp-post-detail__content hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2.5rem 0;
}

body.lp-theme-dark .lp-post-detail__content ul,
body.lp-theme-dark .lp-post-detail__content ol {
    margin: 0 0 1.25rem 1.5rem;
}

/* Gated state: blurred thumbnail + lock + upgrade CTA */
body.lp-theme-dark .lp-post-detail__gated {
    position: relative;
    text-align: center;
}

body.lp-theme-dark .lp-post-detail__gated-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    filter: blur(18px);
    transform: scale(1.05);
    margin-bottom: 2rem;
    background-color: #111;
}

body.lp-theme-dark .lp-post-detail__gated-hero--placeholder {
    background-color: #111;
}

body.lp-theme-dark .lp-post-detail__gated-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
}

body.lp-theme-dark .lp-post-detail__gated-lock {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
    color: #fff;
}

body.lp-theme-dark .lp-post-detail__gated-label {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
}

body.lp-theme-dark .lp-post-detail__gated-cta {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.9rem 2rem;
    background: #fff;
    color: #000;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 160ms ease;
}

body.lp-theme-dark .lp-post-detail__gated-cta:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Mobile */
@media (max-width: 600px) {
    body.lp-theme-dark #lp-post-detail-pane {
        padding: 1.5rem 1rem 3rem;
    }
    body.lp-theme-dark .lp-post-detail__title {
        font-size: 1.2rem;
    }
    body.lp-theme-dark .lp-post-detail-back {
        top: 70px;
    }
    body.lp-theme-dark .lp-post-detail__content figure {
        margin: 1.5rem 0;
    }
    body.lp-theme-dark .lp-post-detail__gated-lock {
        width: 36px;
        height: 36px;
    }
}

/* Feed chrome dim during crossfade — opacity transition mirrors the pane */
body.lp-theme-dark .lp-feed-posts {
    transition: opacity 250ms ease;
}

/* ────────────────────────────────────────────────────────────────────────────
   CHAT MEMBER SUMMARY STRIP (admin-only, inside #lp-messages-pane)

   Wires the creator-only member-summary strip above a Better Messages
   conversation, plus the in-pane read-only detail view.

   Scope: body.lp-is-admin #lp-messages-pane — the pane exists only on
   /members/ and the strip is injected only when a conversation is open.
   Non-admins never see either of these elements (PHP cap check + JS
   body-class guard + missing lpChatSummary localize).
   ──────────────────────────────────────────────────────────────────────── */

body.lp-is-admin #lp-messages-pane .lp-chat-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    position: sticky;
    top: 0;
    z-index: 5;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__meta {
    flex: 1 1 auto;
    min-width: 0;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__address-flag--on {
    color: #6dd48e;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__address-flag--off {
    color: #e8b547;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__address-flag--neutral {
    color: rgba(255, 255, 255, 0.55);
}

/* Patreon-grant pill — small inline marker after the tier name so operators
   can tell at a glance that this member's access is via Patreon pledge,
   not an LP MemberPress subscription. Used in both the chat-summary strip
   and the detail view header. */
body.lp-is-admin #lp-messages-pane .lp-chat-summary__patreon-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid rgba(244, 96, 84, 0.5);
    border-radius: 3px;
    background: rgba(244, 96, 84, 0.12);
    color: #f46054;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    line-height: 1.4;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__view-details {
    flex: 0 0 auto;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

body.lp-is-admin #lp-messages-pane .lp-chat-summary__view-details:hover,
body.lp-is-admin #lp-messages-pane .lp-chat-summary__view-details:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
}

/* Detail view — full pane, scrollable, sticky back button */
body.lp-is-admin #lp-messages-pane .lp-chat-detail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #0b0b0b;
    color: #fff;
    overflow: hidden;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail[hidden] {
    display: none !important;
}

body.lp-is-admin #lp-messages-pane .lp-chat-view[hidden] {
    display: none !important;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__back {
    all: unset;
    cursor: pointer;
    position: sticky;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    z-index: 6;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__back:hover,
body.lp-is-admin #lp-messages-pane .lp-chat-detail__back:focus-visible {
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__identity {
    flex: 1 1 auto;
    min-width: 0;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__name {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-top: 2px;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px 32px;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__label {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    padding-top: 2px;
}

body.lp-is-admin #lp-messages-pane .lp-chat-detail__value {
    color: #fff;
    line-height: 1.5;
    word-break: break-word;
}

/* Responsive — strip wraps below 600px, View Details shrinks to icon-only */
@media (max-width: 600px) {
    body.lp-is-admin #lp-messages-pane .lp-chat-summary {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    body.lp-is-admin #lp-messages-pane .lp-chat-summary__view-details {
        font-size: 0;
        padding: 6px 8px;
    }
    body.lp-is-admin #lp-messages-pane .lp-chat-summary__view-details::before {
        content: "\2139";
        font-size: 14px;
    }
    body.lp-is-admin #lp-messages-pane .lp-chat-detail__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* v1 schedule toggle + scheduled toast deleted in composer-edit-create-v2.
   Schedule UI moved into the takeover sidebar. */

/* ─────────────────────────────────────────────────────────────
 * Dashboard → Library sub-tab
 * ───────────────────────────────────────────────────────────── */
.lp-cdash-library__heading {
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #fff;
}

.lp-cdash-library__subhead {
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: #a3a3a3;
    margin: 0 0 1rem 0;
}

.lp-cdash-library__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lp-cdash-library__row {
    display: grid;
    grid-template-columns: 110px 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: #171717;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: #e5e5e5;
    transition: opacity 150ms ease;
}

.lp-cdash-library__row--busy {
    opacity: 0.55;
    pointer-events: none;
}

.lp-cdash-library__status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 2px;
    text-align: center;
}

.lp-cdash-library__status--draft {
    background: rgba(255,255,255,0.06);
    color: #a3a3a3;
}

.lp-cdash-library__status--future {
    background: #fff;
    color: #0a0a0a;
}

.lp-cdash-library__title {
    font-weight: 500;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-cdash-library__date {
    font-size: 0.8rem;
    color: #a3a3a3;
    white-space: nowrap;
}

.lp-cdash-library__actions {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lp-cdash .lp-cdash-library__btn,
.lp-cdash .lp-cdash-library__btn:hover,
.lp-cdash .lp-cdash-library__btn:focus,
.lp-cdash .lp-cdash-library__btn:visited {
    all: unset;
    display: inline-block;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 4px;
    background: transparent;
    color: #e5e5e5;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.lp-cdash .lp-cdash-library__btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.32);
    color: #fff;
}

.lp-cdash .lp-cdash-library__btn--danger:hover {
    background: rgba(252,165,165,0.12);
    border-color: rgba(252,165,165,0.32);
    color: #fca5a5;
}

.lp-cdash .lp-cdash-library__btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 720px) {
    .lp-cdash-library__row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .lp-cdash-library__actions {
        justify-content: flex-start;
    }
}

/* === CREATOR PAGE === */
/* Foundation shell for admin-only /creator/ surface. New class family
   (.lp-creator__*) — no collisions with existing selectors (grep-verified).
   Inherits body.lp-theme-dark via the body-class emitter, so backgrounds
   pull from the existing dark-theme token usages elsewhere in this file. */

/* Elementor v3 padding — outer container injects --padding-top; override
   the CSS variable (not padding-top directly) per CLAUDE.md. html body.lp-creator
   specificity bump beats Elementor's !important cascade. */
html body.lp-creator .elementor-section,
html body.lp-creator .elementor-container,
html body.lp-creator .elementor-section > .elementor-container,
html body.lp-creator .elementor-element[data-element_type="container"] {
    --padding-top: 0 !important;
    --padding-bottom: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
}
html body.lp-creator .elementor-widget-wrap { padding: 0 !important; }
html body.lp-creator main#content,
html body.lp-creator .site-main { padding: 0 !important; margin: 0 !important; }

/* Outer wrapper — claim the viewport below the 56px .lp-header. */
body.lp-creator {
    background: #0a0a0a;
    color: #f0f0f0;
    min-height: 100vh;
}

.lp-creator {
    position: relative;
    min-height: calc(100vh - 56px);
    box-sizing: border-box;

    /* Design tokens for the creator dashboard button system (Leo's probe §F). */
    --lp-btn-bg-primary: #fff;
    --lp-btn-fg-primary: #0a0a0a;
    --lp-btn-border-subtle: rgba(255, 255, 255, 0.18);
    --lp-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --lp-btn-fg-muted: rgba(255, 255, 255, 0.6);
}

/* === CREATOR BUTTON SYSTEM (Leo's probe §D — Option C Hybrid) ===
   Two-tier reset:
   1. BASE rule (low specificity (0,1,1)): full `all: unset` to
      neutralise the theme button defaults. Per-component rules at
      (0,2,0)+ win on base properties.
   2. PSEUDO-STATE rules ((0,2,1)): neutralise ONLY the theme-painted
      properties (outline, box-shadow, background-image) — do NOT
      `all: unset` because that would strip per-component base styling
      whenever the user hovers/focuses (lost the cascade war in 4.56.0).
   Source order: this block MUST sit at the top of the .lp-creator
   section. Variant rules below win on specificity (0,3,0). */

.lp-creator button,
.lp-creator input[type="button"],
.lp-creator input[type="submit"] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font: inherit;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lp-creator button:hover,
.lp-creator button:focus,
.lp-creator button:focus-visible,
.lp-creator button:active,
.lp-creator button:visited,
.lp-creator input[type="button"]:hover,
.lp-creator input[type="button"]:focus,
.lp-creator input[type="button"]:focus-visible,
.lp-creator input[type="button"]:active,
.lp-creator input[type="button"]:visited,
.lp-creator input[type="submit"]:hover,
.lp-creator input[type="submit"]:focus,
.lp-creator input[type="submit"]:focus-visible,
.lp-creator input[type="submit"]:active,
.lp-creator input[type="submit"]:visited {
    /* Neutralise Hello Elementor + Elementor Pro pseudo-state accent
       paint without nuking per-component base props. */
    background-image: none;
    box-shadow: none;
    outline: none;
}

/* Primary action — Save / Publish / Send / Refresh */
.lp-creator .lp-btn--primary {
    background: var(--lp-btn-bg-primary);
    color: var(--lp-btn-fg-primary);
    border: 1px solid var(--lp-btn-bg-primary);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}
.lp-creator .lp-btn--primary:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
}
.lp-creator .lp-btn--primary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.lp-creator .lp-btn--primary:disabled,
.lp-creator .lp-btn--primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary action — Cancel / Reset / Filter / Export / etc */
.lp-creator .lp-btn--secondary {
    background: transparent;
    color: #fff;
    border: 1px solid var(--lp-btn-border-subtle);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}
.lp-creator .lp-btn--secondary:hover {
    background: var(--lp-btn-hover-bg);
    border-color: rgba(255, 255, 255, 0.4);
}
.lp-creator .lp-btn--secondary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.lp-creator .lp-btn--secondary:disabled,
.lp-creator .lp-btn--secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon-only row action — Library ✎/✕/📌, modal × */
.lp-creator .lp-btn--icon-row {
    background: transparent;
    color: var(--lp-btn-fg-muted);
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-creator .lp-btn--icon-row:hover {
    background: var(--lp-btn-hover-bg);
    color: #fff;
    border-color: var(--lp-btn-border-subtle);
}
.lp-creator .lp-btn--icon-row:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}
.lp-creator .lp-btn--icon-row:disabled,
.lp-creator .lp-btn--icon-row[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 767px) {
    .lp-creator .lp-btn--icon-row {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Tab-nav — bottom-border underline pattern. Used by Library section
   tabs, Library status sub-tabs, Audience subtabs, Insights sub-tab nav,
   Patreon sub-sub-tab nav. Canonical for any horizontal tab strip with
   active-state underline. */
.lp-creator .lp-btn--tab-nav {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    transition: color 120ms ease, border-color 120ms ease;
}
.lp-creator .lp-btn--tab-nav:hover {
    color: rgba(255, 255, 255, 0.85);
}
.lp-creator .lp-btn--tab-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}
.lp-creator .lp-btn--tab-nav.is-active,
.lp-creator .lp-btn--tab-nav--active,
.lp-creator .lp-btn--tab-nav[aria-selected="true"] {
    color: #fff;
    border-bottom-color: #fff;
}

/* Danger action — destructive operations (Library trash-bin Delete,
   Account Delete confirm). Default outlined-only; --filled variant for
   final-confirmation modal buttons. */
.lp-creator .lp-btn--danger {
    background: transparent;
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.5);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}
.lp-creator .lp-btn--danger:hover {
    background: rgba(255, 77, 77, 0.1);
    border-color: #ff4d4d;
}
.lp-creator .lp-btn--danger:focus-visible {
    outline: 2px solid #ff4d4d;
    outline-offset: 2px;
}
.lp-creator .lp-btn--danger--filled {
    background: #ff4d4d;
    color: #fff;
    border-color: #ff4d4d;
}
.lp-creator .lp-btn--danger--filled:hover {
    background: #d93030;
    border-color: #d93030;
}
.lp-creator .lp-btn--danger:disabled,
.lp-creator .lp-btn--danger[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pin button — disabled state (--active gold cue moved to .lp-icon
   inside CREATOR ICON SYSTEM block below). */
.lp-creator .lp-creator__library-pin[disabled] {
    opacity: 0.5;
    cursor: progress;
}

/* === END CREATOR BUTTON SYSTEM === */

/* === CREATOR ICON SYSTEM (creator-icon-system spec) ===
   Lucide stroke-only SVGs rendered via icon()/lp_icon() helpers.
   currentColor inheritance lets per-surface text-color drive icon color. */
.lp-icon {
    display: inline-block;
    vertical-align: -2px;
    flex-shrink: 0;
    color: inherit;
}

/* Inline-icon alignment inside chips/pills (icon-then-text pattern) */
.lp-audience-chip .lp-icon,
.lp-audience .lp-audience__pill .lp-icon,
.lp-audience .lp-audience__btn .lp-icon,
.lp-creator__library-pills .lp-creator__library-pill .lp-icon,
.lp-cdash-sc-btn .lp-icon {
    margin-right: 4px;
    vertical-align: middle;
}

/* Pin --active gold fill + 15° rotation (redundant cue for monochrome) */
.lp-creator .lp-creator__library-pin--active .lp-icon {
    color: #ffd700;
    fill: #ffd700;
    stroke: #ffd700;
    transform: rotate(-15deg);
    transition: transform 150ms ease, color 150ms ease;
}

/* === END CREATOR ICON SYSTEM === */

.lp-creator__sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 220px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 20px 0;
    background: #111;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100;
    box-sizing: border-box;
}

.lp-creator__nav-item {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.01em;
    border-left: 3px solid transparent;
    transition: background 120ms, color 120ms, border-left-color 120ms;
}
.lp-creator__nav-item:hover,
.lp-creator__nav-item:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
}
.lp-creator__nav-item--active {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-left-color: #fff;
}

.lp-creator__main {
    margin-left: 220px;
    /* Phase A — reduced top padding since the section h1 is now visually-hidden. */
    padding: 16px 40px 32px;
    min-height: calc(100vh - 56px);
    box-sizing: border-box;
}

.lp-creator__section {
    display: none;
}
.lp-creator__section--active {
    display: block;
}

/* Phase A — section h1 visually-hidden (preserve a11y, remove visual chrome). */
.lp-creator__section-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.lp-creator__section-placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    font-style: italic;
    margin: 0;
}

/* Mobile toggle + backdrop — hidden on desktop.
   `all: unset` + specificity bump beats Hello Elementor's default `button`
   accent border (pink outline) and `display: inline-block` default which
   otherwise fight our `display: none` (CLAUDE.md "Button / link specificity"). */
html body.lp-creator .lp-creator__sidebar-toggle {
    all: unset;
    box-sizing: border-box;
    display: none;
    position: fixed;
    top: 68px;
    left: 12px;
    z-index: 200;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
html body.lp-creator .lp-creator__sidebar-toggle svg {
    display: block;
    stroke: #fff;
}
.lp-creator__sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
}
.lp-creator__sidebar-backdrop--visible {
    display: block;
}

/* Back-arrow icon on /creator/ — full opacity, subtle hover. */
.lp-creator .lp-members-header-icons a.lp-members-header-icon--back {
    opacity: 1;
    text-decoration: none;
}
.lp-creator .lp-members-header-icons a.lp-members-header-icon--back:hover,
.lp-creator .lp-members-header-icons a.lp-members-header-icon--back:focus {
    opacity: 0.7;
    text-decoration: none;
}

@media (max-width: 900px) {
    html body.lp-creator .lp-creator__sidebar-toggle {
        display: inline-flex;
    }
    .lp-creator__sidebar {
        transform: translateX(-100%);
        transition: transform 200ms ease;
        z-index: 150;
        width: 260px;
    }
    .lp-creator__sidebar.lp-creator__sidebar--open {
        transform: translateX(0);
    }
    .lp-creator__main {
        margin-left: 0;
        padding: 64px 20px 32px; /* keep top room for sidebar toggle button */
    }
    /* Phase A — keep visually-hidden in mobile too (no font-size needed). */
}

/* === LIBRARY === (creator-library-readonly)
   Scoped under .lp-creator__library-*. All buttons use `all: unset` +
   (0,2,1) specificity per CLAUDE.md "Button / link specificity vs theme +
   Elementor defaults" to defeat Hello Elementor + Elementor-global accents.
*/
.lp-creator__library {
    display: block;
    color: rgba(255, 255, 255, 0.88);
}

/* Section tabs — Phase A: pinned to top-left of content area as the first
   row above status pills + tag pills + toolbar. justify-content keeps tabs
   left-aligned even on wide screens. */
.lp-creator__library-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin: 0 0 12px;
}
.lp-creator .lp-creator__library-tabs button.lp-creator__library-tab {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.55);
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}
.lp-creator .lp-creator__library-tabs button.lp-creator__library-tab:hover,
.lp-creator .lp-creator__library-tabs button.lp-creator__library-tab:focus-visible {
    color: rgba(255, 255, 255, 0.85);
}
.lp-creator .lp-creator__library-tabs button.lp-creator__library-tab--active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Status sub-tabs */
.lp-creator__library-substabs {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
}
.lp-creator .lp-creator__library-substabs button.lp-creator__library-substab {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lp-creator .lp-creator__library-substabs button.lp-creator__library-substab:hover,
.lp-creator .lp-creator__library-substabs button.lp-creator__library-substab:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.lp-creator .lp-creator__library-substabs button.lp-creator__library-substab--active {
    color: #0a0a0a;
    background: #fff;
    border-color: #fff;
}
/* Q3 — substab count badge ("(N)"). De-emphasized + tabular numerals so
   counts column-align across the four substab buttons. */
.lp-creator__library-substab-count {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* Pills row (wrapper carries the right-edge fade). */
.lp-creator__library-pills-wrap {
    position: relative;
    margin: 0 0 14px;
}
.lp-creator__library-pills-wrap[hidden] {
    display: none !important;
}
.lp-creator__library-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: transparent;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill:hover,
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill--active {
    color: #0a0a0a;
    background: #fff;
    border-color: #fff;
}
/* Phase A — Select All / Deselect All "virtual" pills: outline-only, never
   take an active state (always action affordances). Specificity matches
   the active rule so they don't get filled accidentally. */
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill.lp-creator__library-pill-bulk,
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill.lp-creator__library-pill-bulk--active {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.35);
    border-style: dashed;
    font-weight: 500;
}
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill.lp-creator__library-pill-bulk:hover,
.lp-creator .lp-creator__library-pills button.lp-creator__library-pill.lp-creator__library-pill-bulk:focus-visible {
    color: #fff;
    border-color: #fff;
}
.lp-creator__library-pill-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    font-size: 11px;
}

/* Audience + Shown-in-feed row — tighter top margin (sits below the category
   pills row) and lighter visual weight. Pills inherit base styling, only the
   wrap spacing differs. */
.lp-creator__library-pills-wrap--audience {
    margin-top: -6px; /* visually adjacent to the category row above */
}
.lp-creator .lp-creator__library-pills--audience {
    gap: 6px;
}
.lp-creator .lp-creator__library-pills--audience button.lp-creator__library-pill {
    /* Slightly smaller padding to differentiate the secondary filter row. */
    padding: 4px 10px;
}

/* Toolbar */
.lp-creator__library-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 14px;
}
.lp-creator .lp-creator__library-toolbar input.lp-creator__library-search {
    all: unset;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: #fff;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}
.lp-creator .lp-creator__library-toolbar input.lp-creator__library-search:focus-visible {
    border-color: rgba(255, 255, 255, 0.4);
}
.lp-creator .lp-creator__library-toolbar input.lp-creator__library-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.lp-creator .lp-creator__library-toolbar select.lp-creator__library-sort {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    color: #fff;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

/* List + rows */
.lp-creator__library-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}
.lp-creator__library-row {
    display: grid;
    /* Phase G — title+date stacked in column 2 (.titlewrap), status chip
       column 3, pencil/trash actions column 4 (right-most). */
    grid-template-columns: 50px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 14px 8px 8px;
    background: #0f0f0f;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.88);
}
/* Phase G — vertical stack of title (top) + date (bottom). */
.lp-creator__library-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lp-creator__library-row--clickable {
    cursor: pointer;
    transition: background 120ms ease;
}
.lp-creator__library-row--clickable:hover,
.lp-creator__library-row--clickable:focus-visible {
    background: rgba(255, 255, 255, 0.06);
}
.lp-creator__library-thumb {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    background: #1c1c1c;
}
.lp-creator__library-thumb--empty {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.lp-creator__library-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-creator__library-modified {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status chips */
.lp-creator__library-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.lp-creator__library-status--publish {
    background: rgba(30, 138, 60, 0.18);
    color: #5edb87;
}
.lp-creator__library-status--draft {
    background: rgba(148, 148, 148, 0.18);
    color: #c8c8c8;
}
.lp-creator__library-status--future {
    background: rgba(199, 121, 26, 0.18);
    color: #f0a85a;
}

/* Gating pill (free/paid) — sits next to the status pill in a shared cell so
   the .lp-creator__library-row grid (50px 1fr auto auto) is unchanged. Gold
   accent for paid mirrors the pin badge gold-tint pattern; free is a subtle
   gray outline to keep the most-common state low-noise. */
.lp-creator__library-pills-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-creator__library-gating {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.lp-creator__library-gating--paid {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.4);
}
.lp-creator__library-gating--free {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Empty state */
.lp-creator__library-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    background: #0f0f0f;
}

/* Pagination */
.lp-creator__library-pagination {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.lp-creator__library-pagination[hidden] {
    display: none !important;
}
.lp-creator .lp-creator__library-pagination button.lp-creator__library-page {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 13px;
    min-width: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lp-creator .lp-creator__library-pagination button.lp-creator__library-page:hover:not([disabled]),
.lp-creator .lp-creator__library-pagination button.lp-creator__library-page:focus-visible:not([disabled]) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.lp-creator .lp-creator__library-pagination button.lp-creator__library-page--active {
    color: #0a0a0a;
    background: #fff;
    border-color: #fff;
}
.lp-creator .lp-creator__library-pagination button.lp-creator__library-page[disabled] {
    opacity: 0.35;
    cursor: default;
}
.lp-creator__library-pagination .lp-creator__library-page--ellipsis {
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.45);
}

/* Mobile (<900px): Membership pill row scrolls horizontally with right-edge fade.
   Fade is a pseudo on the wrapper — pseudo on scroll container would scroll with
   content (see design.md §CSS pitfalls). */
@media (max-width: 900px) {
    .lp-creator__library-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-right: 30px;
    }
    .lp-creator__library-pills::-webkit-scrollbar { display: none; }
    .lp-creator__library-pills-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(10, 10, 10, 0), #0a0a0a 80%);
    }
    /* Phase G — mobile: thumb + titlewrap (title/date stacked) + status chip
       in row 1; actions wrap below if needed. */
    .lp-creator__library-row {
        grid-template-columns: 50px 1fr auto;
        grid-template-areas:
            "thumb titlewrap status"
            "thumb actions actions";
        row-gap: 6px;
    }
    /* 4.59.30 — membership rows mobile: prepend a 24px checkbox column ONLY
       when --bulk-on is set (matches the desktop behavior introduced in
       4.59.30). Without the modifier, rows keep the standard 3-column
       template so Published has no empty gutter. */
    .lp-creator__library-row--membership.lp-creator__library-row--bulk-on {
        grid-template-columns: 24px 50px 1fr auto;
        grid-template-areas:
            "check thumb titlewrap status"
            "check thumb actions actions";
    }
    .lp-creator__library-checkbox-cell { grid-area: check; align-self: center; }
    .lp-creator__library-thumb { grid-area: thumb; }
    .lp-creator__library-titlewrap { grid-area: titlewrap; }
    .lp-creator__library-title { white-space: normal; }
    .lp-creator__library-pills-cell { grid-area: status; justify-self: end; align-self: start; }
    .lp-creator__library-status { grid-area: status; justify-self: end; align-self: start; }
    .lp-creator__library-actions { grid-area: actions; justify-self: start; }
}


/* ============================================================================
   COMPOSER v2 — TipTap full-screen takeover
   ============================================================================
   Namespace: .lp-composer-takeover*  +  .lp-cmp-* (sub-components inside)
   Token vars (--lp-cmp-* + --lp-z-*) are scoped to .lp-composer-takeover root
   per design.md S15 — NOT :root.
   ============================================================================ */

/* Hide creator chrome while composing (Phase 2.4) */
body.lp-composing .lp-header,
body.lp-composing .lp-creator__sidebar,
body.lp-composing .lp-creator__sidebar-backdrop,
body.lp-composing .lp-creator__main,
body.lp-composing #wpadminbar {
    display: none !important;
}
body.lp-composing {
    overflow: hidden;
}

/* Takeover overlay (Phase 2.4 + 13.5) */
.lp-composer-takeover {
    /* Token vars (Phase 2.5) */
    --lp-cmp-bg: #0a0a0a;
    --lp-cmp-bg-elev1: #171717;
    --lp-cmp-bg-elev2: #262626;
    --lp-cmp-bg-elev3: #2f2f2f;
    --lp-cmp-fg: #f5f5f5;
    --lp-cmp-fg-muted: #a3a3a3;
    --lp-cmp-fg-placeholder: #737373;
    --lp-cmp-border: #262626;
    --lp-cmp-border-subtle: #1a1a1a;
    --lp-cmp-accent: #00ff88;
    --lp-cmp-accent-fg: #0a0a0a;
    --lp-cmp-danger: #ff4444;
    --lp-cmp-warning: #ffaa00;
    --lp-cmp-overlay: rgba(0, 0, 0, 0.85);
    --lp-cmp-divider-color: #404040;
    --lp-cmp-radius: 6px;
    --lp-cmp-radius-sm: 4px;
    --lp-cmp-keyboard-offset: 0px;

    --lp-z-takeover: 10000;
    --lp-z-takeover-floats: 10010;
    --lp-z-modal: 10100;
    --lp-z-modal-spinner: 10110;
    --lp-z-toast: 10200;

    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    background: var(--lp-cmp-bg);
    color: var(--lp-cmp-fg);
    font-family: 'Onest', sans-serif;
    z-index: var(--lp-z-takeover);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top bar */
.lp-composer-takeover__topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--lp-cmp-bg-elev1);
    border-bottom: 1px solid var(--lp-cmp-border);
    flex-shrink: 0;
    height: 56px;
    box-sizing: border-box;
}
.lp-composer-takeover__close {
    font-size: 22px;
    line-height: 1;
}
.lp-composer-takeover__mode-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--lp-cmp-fg-muted);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.lp-composer-takeover__topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.lp-composer-takeover__publish-wrap {
    position: relative;
    display: inline-flex;
}
.lp-composer-takeover__publish-toggle {
    border-left: 1px solid rgba(0, 0, 0, 0.25) !important;
    padding-left: 8px;
    padding-right: 8px;
}
.lp-composer-takeover__publish-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--lp-cmp-bg-elev2);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius);
    min-width: 220px;
    z-index: var(--lp-z-takeover-floats);
    display: flex;
    flex-direction: column;
    padding: 4px;
}
/* Phase E — explicit [hidden] handling: the .publish-menu's display:flex
   beats the implicit display:none from the [hidden] attribute, which left
   the menu permanently visible (and broken). */
.lp-composer-takeover__publish-menu[hidden] {
    display: none !important;
}
.lp-composer-takeover__publish-menu button {
    all: unset;
    box-sizing: border-box;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--lp-cmp-fg);
    font-size: 14px;
    border-radius: var(--lp-cmp-radius-sm);
    text-align: left;
}
.lp-composer-takeover__publish-menu button:hover {
    background: var(--lp-cmp-bg-elev3);
}
.lp-composer-takeover__publish-menu .lp-cmp-publish-menu__primary {
    color: var(--lp-cmp-accent);
    font-weight: 600;
}

/* Ensure [hidden] beats the high-specificity .lp-cmp-btn rule below.
   Without this, `display: inline-flex` (0,2,1) outweighs UA `[hidden] {
   display: none }` (0,1,0) so JS-set hidden attribute stays visible. */
.lp-composer-takeover button.lp-cmp-btn[hidden] {
    display: none !important;
}
/* Generic buttons (Phase 4 — Elementor button override per S15) */
.lp-composer-takeover button.lp-cmp-btn,
.lp-composer-takeover button.lp-cmp-btn:hover,
.lp-composer-takeover button.lp-cmp-btn:focus,
.lp-composer-takeover button.lp-cmp-btn:active,
.lp-composer-takeover button.lp-cmp-btn:visited {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 36px;
    min-width: 36px;
    cursor: pointer;
    background: var(--lp-cmp-bg-elev2);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease;
}
.lp-composer-takeover button.lp-cmp-btn:hover {
    background: var(--lp-cmp-bg-elev3);
    border-color: var(--lp-cmp-fg-muted);
}
.lp-composer-takeover button.lp-cmp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.lp-composer-takeover button.lp-cmp-btn--primary {
    background: var(--lp-cmp-accent);
    color: var(--lp-cmp-accent-fg);
    border-color: var(--lp-cmp-accent);
}
.lp-composer-takeover button.lp-cmp-btn--primary:hover {
    background: #00d973;
    border-color: #00d973;
}
.lp-composer-takeover button.lp-cmp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--lp-cmp-fg-muted);
}
.lp-composer-takeover button.lp-cmp-btn--ghost:hover {
    background: var(--lp-cmp-bg-elev2);
    color: var(--lp-cmp-fg);
}
.lp-composer-takeover button.lp-cmp-btn--danger {
    background: var(--lp-cmp-danger);
    color: #fff;
    border-color: var(--lp-cmp-danger);
}
.lp-composer-takeover button.lp-cmp-btn--icon {
    width: 36px;
    padding: 8px;
}

/* Main split: editor (60%) + sidebar (40%) */
.lp-composer-takeover__main {
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.lp-composer-takeover__editor {
    flex: 1 1 60%;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 32px clamp(16px, 4vw, 48px);
    position: relative;
}
.lp-composer-takeover__sidebar {
    flex: 0 0 40%;
    max-width: 420px;
    min-width: 320px;
    overflow-y: auto;
    background: var(--lp-cmp-bg-elev1);
    border-left: 1px solid var(--lp-cmp-border);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Title input */
.lp-composer-takeover__title {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--lp-cmp-border);
    color: var(--lp-cmp-fg);
    font-family: inherit;
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 0 14px 0;
    margin-bottom: 12px;
    outline: none;
}
.lp-composer-takeover__title::placeholder {
    color: var(--lp-cmp-fg-placeholder);
}

/* TipTap body */
.lp-composer-takeover__body {
    margin-top: 8px;
}
.lp-composer-takeover__prose.ProseMirror {
    outline: none;
    font-size: 16px;
    line-height: 1.6;
    color: var(--lp-cmp-fg);
    min-height: 300px;
    padding-bottom: 200px;
}
.lp-composer-takeover__prose.ProseMirror p {
    margin: 0 0 1em 0;
}
.lp-composer-takeover__prose.ProseMirror h2 {
    font-size: 1.6em;
    font-weight: 700;
    margin: 1.2em 0 0.4em 0;
    color: var(--lp-cmp-fg);
}
.lp-composer-takeover__prose.ProseMirror h3 {
    font-size: 1.25em;
    font-weight: 700;
    margin: 1.0em 0 0.3em 0;
    color: var(--lp-cmp-fg);
}
.lp-composer-takeover__prose.ProseMirror blockquote {
    border-left: 3px solid var(--lp-cmp-accent);
    padding-left: 16px;
    margin: 1em 0;
    color: var(--lp-cmp-fg-muted);
    font-style: italic;
}
.lp-composer-takeover__prose.ProseMirror ul,
.lp-composer-takeover__prose.ProseMirror ol {
    padding-left: 1.5em;
    margin: 0 0 1em 0;
}
.lp-composer-takeover__prose.ProseMirror a,
.lp-composer-takeover__prose.ProseMirror a:link,
.lp-composer-takeover__prose.ProseMirror a:visited,
.lp-composer-takeover__prose.ProseMirror a:hover,
.lp-composer-takeover__prose.ProseMirror a:focus,
.lp-composer-takeover__prose.ProseMirror a:active {
    color: var(--lp-cmp-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lp-composer-takeover__prose.ProseMirror strong { font-weight: 700; }
.lp-composer-takeover__prose.ProseMirror em { font-style: italic; }
.lp-composer-takeover__prose.ProseMirror p.is-editor-empty:first-child::before,
.lp-composer-takeover__prose.ProseMirror p.is-empty::before {
    content: attr(data-placeholder);
    color: var(--lp-cmp-fg-placeholder);
    pointer-events: none;
    float: left;
    height: 0;
}

/* Wide image asymmetry */
.lp-composer-takeover .lp-figure {
    margin: 1.5em 0;
}
.lp-composer-takeover .lp-figure img {
    max-width: 100%;
    height: auto;
    display: block;
}
.lp-composer-takeover .lp-figure figcaption {
    margin-top: 0.5em;
    font-size: 0.85em;
    color: var(--lp-cmp-fg-muted);
    font-style: italic;
}
.lp-composer-takeover .lp-figure[data-align="wide"] {
    margin-left: -32px;
    margin-right: -32px;
    max-width: calc(100% + 64px);
}
.lp-cmp-figcaption--empty::before {
    content: attr(data-placeholder);
    color: var(--lp-cmp-fg-placeholder);
}
/* Render-side wide-image full-bleed (members feed inline detail) */
body:not(.lp-composing) .lp-figure[data-align="wide"] {
    margin-left: calc(-1 * (100vw - 100%) / 2 + 16px);
    margin-right: calc(-1 * (100vw - 100%) / 2 + 16px);
    max-width: 100vw;
}

/* BubbleMenu */
.lp-cmp-bubble-menu {
    position: absolute;
    z-index: var(--lp-z-takeover-floats);
    background: var(--lp-cmp-bg-elev2);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius);
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.lp-cmp-bubble-menu[hidden] { display: none; }
.lp-composer-takeover button.lp-cmp-bm-btn,
.lp-composer-takeover button.lp-cmp-bm-btn:hover,
.lp-composer-takeover button.lp-cmp-bm-btn:focus,
.lp-composer-takeover button.lp-cmp-bm-btn:active,
.lp-composer-takeover button.lp-cmp-bm-btn:visited {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--lp-cmp-radius-sm);
    color: var(--lp-cmp-fg);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
.lp-composer-takeover button.lp-cmp-bm-btn:hover {
    background: var(--lp-cmp-bg-elev3);
}
.lp-composer-takeover button.lp-cmp-bm-btn--danger:hover {
    background: var(--lp-cmp-danger);
    color: #fff;
}
.lp-cmp-bm-heading,
.lp-cmp-bm-align {
    background: var(--lp-cmp-bg-elev2);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 4px 6px;
    font-size: 13px;
    font-family: inherit;
}

/* Floating "+" menu */
.lp-cmp-floating-menu {
    position: absolute;
    z-index: var(--lp-z-takeover-floats);
}
.lp-cmp-floating-menu[hidden] { display: none; }
.lp-cmp-floating-menu__plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lp-cmp-bg-elev2);
    border: 1px solid var(--lp-cmp-border);
    color: var(--lp-cmp-fg-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.lp-cmp-floating-menu__plus:hover {
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg);
}

/* Slash popup */
.lp-cmp-slash-popup {
    position: absolute;
    z-index: var(--lp-z-takeover-floats);
    background: var(--lp-cmp-bg-elev2);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius);
    padding: 4px;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.lp-cmp-slash-popup[hidden] { display: none; }
.lp-cmp-slash-popup button {
    all: unset;
    box-sizing: border-box;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--lp-cmp-fg);
    font-size: 14px;
    border-radius: var(--lp-cmp-radius-sm);
    text-align: left;
}
.lp-cmp-slash-popup button:hover,
.lp-cmp-slash-popup button.lp-cmp-slash-item--active {
    background: var(--lp-cmp-bg-elev3);
}
.lp-cmp-slash-empty {
    padding: 8px 12px;
    color: var(--lp-cmp-fg-muted);
    font-size: 13px;
}

/* Saved flash */
.lp-cmp-saved-flash {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lp-cmp-accent);
    color: var(--lp-cmp-accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.lp-cmp-saved-flash::before { content: '✓'; font-weight: 700; }
.lp-cmp-saved-flash--visible { opacity: 1; transform: scale(1); }

/* Sidebar panels */
.lp-cmp-panel {
    border: 0;
    padding: 12px 14px;
    background: var(--lp-cmp-bg-elev2);
    border-radius: var(--lp-cmp-radius);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lp-cmp-panel legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-cmp-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
}
.lp-cmp-panel--inferred-hint {
    background: var(--lp-cmp-warning);
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
}
.lp-cmp-panel__hint {
    font-size: 12px;
    color: var(--lp-cmp-fg-muted);
    margin: 0;
}
.lp-cmp-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    min-height: 28px;
}
.lp-cmp-radio--nested {
    margin-left: 18px;
}
.lp-cmp-tier-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 18px;
    max-height: 240px;
    overflow-y: auto;
}
.lp-cmp-tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
}
.lp-cmp-tier-amount { color: var(--lp-cmp-fg-muted); }
.lp-cmp-error {
    font-size: 12px;
    color: var(--lp-cmp-danger);
    margin-top: 4px;
}
.lp-cmp-category {
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
}
.lp-cmp-comments {
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
}
.lp-cmp-featured-preview {
    position: relative;
    overflow: hidden;
    border-radius: var(--lp-cmp-radius-sm);
    /* Phase 6 (Bug 2): give the preview a fixed 16:9 frame so applyAdjustToImg's
       object-fit/object-position/scale<1 padding tweaks have a box to fit
       against. Without this, height:auto matched the <img>'s natural ratio
       and focal/fit/scale-down changes were invisible. */
    aspect-ratio: 16 / 9;
    border: 1px solid var(--lp-cmp-border);
}
.lp-cmp-featured-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.lp-cmp-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.lp-composer-takeover button.lp-cmp-show-in-feed {
    all: unset;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 14px;
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg-muted);
    font-size: 13px;
    font-weight: 600;
    min-height: 28px;
    box-sizing: border-box;
}
.lp-composer-takeover button.lp-cmp-show-in-feed[aria-checked="true"] {
    background: var(--lp-cmp-accent);
    color: var(--lp-cmp-accent-fg);
}
.lp-cmp-schedule-at {
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 6px 8px;
    font-family: inherit;
    color-scheme: dark;
}
/* 4.59.22 — TZ hint under the schedule input. Tells the user "Times are in
   your local timezone (X)" so they know what frame the picker uses. */
.lp-cmp-schedule-tz {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.72;
}
.lp-cmp-schedule-tz[hidden] { display: none; }
.lp-cmp-revisions-link,
.lp-cmp-revisions-link:link,
.lp-cmp-revisions-link:visited,
.lp-cmp-revisions-link:hover,
.lp-cmp-revisions-link:focus,
.lp-cmp-revisions-link:active {
    color: var(--lp-cmp-accent) !important;
    text-decoration: none;
    font-size: 14px;
}
.lp-cmp-revisions-link[aria-disabled="true"] {
    color: var(--lp-cmp-fg-muted) !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Divider node */
.lp-cmp-divider-block {
    position: relative;
    border: 1px dashed var(--lp-cmp-divider-color);
    border-radius: var(--lp-cmp-radius);
    padding: 12px 16px;
    margin: 1.2em 0;
    text-align: center;
    color: var(--lp-cmp-fg-muted);
    font-size: 13px;
    font-style: italic;
    user-select: none;
    background: var(--lp-cmp-bg-elev1);
}
.lp-cmp-divider-block .lp-cmp-divider-remove {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: 0;
    color: var(--lp-cmp-fg-muted);
    cursor: pointer;
    font-size: 16px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.lp-cmp-divider-block:hover .lp-cmp-divider-remove {
    opacity: 1;
}

/* composer-paid-gating-sidebar Phase 3 — R4 mode-aware divider styling.
 *
 * Two flavors share the same .lp-cmp-divider-block frame:
 *   --auto    paint by ProseMirror Decoration. Click promotes to Custom,
 *             so we cue interactivity via cursor:pointer and a quiet
 *             hover lift. No × button (read-only marker).
 *   --custom  real lpGateDivider node. cursor:move because the node is
 *             draggable; × button visible on hover (already wired). A
 *             ::after tooltip surfaces the affordance the first time.
 */
.lp-cmp-divider-block--auto {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 120ms ease;
}
.lp-cmp-divider-block--auto:hover {
    opacity: 0.85;
}
.lp-cmp-divider-block--auto .lp-cmp-divider-remove {
    display: none;
}
.lp-cmp-divider-block--custom {
    cursor: move;
}
.lp-cmp-divider-block--custom::after {
    content: 'Drag to move · ×';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-style: normal;
    color: var(--lp-cmp-fg-muted);
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    white-space: nowrap;
}
.lp-cmp-divider-block--custom:hover::after {
    opacity: 0.8;
}

/* Free-preview panel (sidebar fieldset shown when audience=Paid).
 * Inherits .lp-cmp-panel layout; this block adds the inline chip and the
 * Insert/Remove action button.
 */
.lp-cmp-panel--preview-mode legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-cmp-preview-mode-chip {
    font-size: 12px;
    line-height: 1.45;
    color: var(--lp-cmp-fg-muted);
    background: var(--lp-cmp-bg-elev3);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 8px 10px;
    margin-top: 4px;
}
.lp-cmp-preview-mode-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lp-cmp-preview-mode-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--lp-cmp-fg-muted);
    opacity: 0.85;
    margin: 4px 0 0;
}
.lp-composer-takeover button.lp-cmp-preview-mode-toggle {
    all: unset;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--lp-cmp-radius-sm);
    background: var(--lp-cmp-bg-elev3);
    color: var(--lp-cmp-fg);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    min-height: 32px;
    box-sizing: border-box;
    border: 1px solid var(--lp-cmp-border);
    transition: background 120ms ease, border-color 120ms ease;
}
.lp-composer-takeover button.lp-cmp-preview-mode-toggle:hover,
.lp-composer-takeover button.lp-cmp-preview-mode-toggle:focus-visible {
    background: var(--lp-cmp-bg-elev2);
    border-color: var(--lp-cmp-accent);
    outline: none;
}

/* Bunny + YouTube node placeholders */
.lp-cmp-bunny-video,
.lp-cmp-bunny-media,
.lp-cmp-youtube-embed {
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius);
    padding: 12px;
    margin: 1.2em 0;
    background: var(--lp-cmp-bg-elev2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Phase K — Bunny thumbnail tile. Aspect-ratio 16/9 wins over the legacy
   fixed height when an actual <img> is present (data-has-thumb=1). The
   img sits behind the GUID label with object-fit: cover. */
.lp-cmp-bunny-video__thumb {
    position: relative;
    height: 180px;
    background: #000 center / cover no-repeat;
    border-radius: var(--lp-cmp-radius-sm);
    display: flex;
    align-items: flex-end;
    padding: 12px;
    overflow: hidden;
}
.lp-cmp-bunny-video__thumb[data-has-thumb] {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 180px;
}
.lp-cmp-bunny-video__thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}
.lp-cmp-bunny-video__thumb .lp-cmp-bunny-video__label {
    position: relative;
    z-index: 1;
}
.lp-cmp-bunny-video__open,
.lp-cmp-bunny-video__open:link,
.lp-cmp-bunny-video__open:visited,
.lp-cmp-bunny-video__open:hover,
.lp-cmp-bunny-video__open:focus,
.lp-cmp-bunny-video__open:active {
    color: var(--lp-cmp-fg) !important;
    text-decoration: none !important;
    font-size: 12px;
}
.lp-cmp-bunny-video__label,
.lp-cmp-bunny-media__label,
.lp-cmp-youtube-embed__label {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.lp-cmp-bunny-video__controls,
.lp-cmp-bunny-media,
.lp-cmp-youtube-embed {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.lp-cmp-youtube-embed__ph {
    height: 200px;
    background: var(--lp-cmp-bg-elev3) center / cover no-repeat;
    border-radius: var(--lp-cmp-radius-sm);
    display: flex;
    align-items: flex-end;
    padding: 12px;
}

/* Modal overlay (generic + preview) */
.lp-cmp-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--lp-cmp-overlay, rgba(0, 0, 0, 0.85));
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--lp-cmp-fg, #f5f5f5);
    font-family: 'Onest', sans-serif;
}
.lp-cmp-modal {
    background: var(--lp-cmp-bg-elev1, #171717);
    border: 1px solid var(--lp-cmp-border, #262626);
    border-radius: var(--lp-cmp-radius, 6px);
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lp-cmp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-cmp-border, #262626);
}
.lp-cmp-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.lp-cmp-modal__close {
    background: transparent;
    border: 0;
    color: var(--lp-cmp-fg-muted, #a3a3a3);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.lp-cmp-modal__body {
    padding: 18px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
}
.lp-cmp-modal__body p { margin: 0 0 0.8em 0; }
.lp-cmp-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--lp-cmp-border, #262626);
}
.lp-cmp-modal__actions .lp-cmp-btn {
    all: unset;
    box-sizing: border-box;
    padding: 8px 14px;
    min-height: 36px;
    cursor: pointer;
    background: var(--lp-cmp-bg-elev2, #262626);
    color: var(--lp-cmp-fg, #f5f5f5);
    border: 1px solid var(--lp-cmp-border, #262626);
    border-radius: var(--lp-cmp-radius-sm, 4px);
    font-size: 14px;
    font-weight: 500;
}
.lp-cmp-modal__actions .lp-cmp-btn--primary {
    background: var(--lp-cmp-accent, #00ff88);
    color: var(--lp-cmp-accent-fg, #0a0a0a);
    border-color: var(--lp-cmp-accent, #00ff88);
}
.lp-cmp-modal__actions .lp-cmp-btn--danger {
    background: var(--lp-cmp-danger, #ff4444);
    color: #fff;
    border-color: var(--lp-cmp-danger, #ff4444);
}
.lp-cmp-modal__actions .lp-cmp-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.lp-cmp-heavy-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.lp-cmp-typedel-input {
    width: 100%;
    background: var(--lp-cmp-bg-elev2);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 8px 10px;
    margin-top: 6px;
    font-family: inherit;
}
.lp-cmp-yt-modal__thumb {
    max-width: 100%;
    border-radius: var(--lp-cmp-radius-sm);
}
.lp-cmp-yt-modal__url {
    margin: 8px 0;
    font-size: 12px;
    color: var(--lp-cmp-fg-muted);
    word-break: break-all;
}
.lp-cmp-yt-modal__choices,
.lp-cmp-vp-modal {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-cmp-yt-modal__choices legend,
.lp-cmp-vp-modal legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lp-cmp-fg-muted);
    padding-bottom: 4px;
}
.lp-cmp-yt-modal__choices label,
.lp-cmp-vp-modal label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-cmp-vp-value {
    width: 100%;
    background: var(--lp-cmp-bg-elev2);
    color: var(--lp-cmp-fg);
    border: 1px solid var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    padding: 8px 10px;
    font-family: inherit;
}
.lp-cmp-vp-error {
    color: var(--lp-cmp-danger);
    font-size: 12px;
}
/* Phase L — Per-block thumbnail picker. Reuses .lp-cmp-vp-modal layout. */
.lp-cmp-thumbpick label {
    display: block;
    margin: 6px 0;
}
.lp-cmp-thumbpick label.lp-cmp-thumbpick--disabled {
    opacity: 0.55;
    color: var(--lp-cmp-fg-muted);
}

/* Phase M — Featured image suggestion (renders inline inside the
   .lp-cmp-panel--featured panel when load_post supplies first_video_guid
   and the panel is otherwise empty). */
.lp-cmp-featured-suggest {
    margin-top: 12px;
    padding: 10px;
    border: 1px dashed var(--lp-cmp-border);
    border-radius: var(--lp-cmp-radius-sm);
    background: var(--lp-cmp-bg-elev2);
}
.lp-cmp-featured-suggest__preview {
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--lp-cmp-radius-sm);
    overflow: hidden;
    display: flex;
}
.lp-cmp-featured-suggest__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-cmp-featured-suggest__hint {
    margin: 8px 0;
    font-size: 12px;
    color: var(--lp-cmp-fg-muted);
}
.lp-cmp-featured-suggest__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Preview modal */
.lp-cmp-preview-overlay { z-index: 10110; }
.lp-cmp-preview-modal {
    width: min(720px, 100%);
    max-height: 90vh;
}
.lp-cmp-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--lp-cmp-border);
    flex-wrap: wrap;
    gap: 12px;
}
.lp-cmp-preview-toggle {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}
.lp-cmp-preview-toggle legend {
    color: var(--lp-cmp-fg-muted);
    font-size: 13px;
}
.lp-cmp-preview-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lp-cmp-preview-deep-link,
.lp-cmp-preview-deep-link:link,
.lp-cmp-preview-deep-link:visited,
.lp-cmp-preview-deep-link:hover,
.lp-cmp-preview-deep-link:focus,
.lp-cmp-preview-deep-link:active {
    color: var(--lp-cmp-accent) !important;
    font-size: 13px;
    text-decoration: none;
}
.lp-cmp-preview-body {
    padding: 18px;
    overflow-y: auto;
    /* Phase I (OpenSpec Item 4) — match takeover dark theme. The rendered
       /members/ post markup styles its own foreground on the dark canvas. */
    background: var(--lp-cmp-bg);
    color: var(--lp-cmp-fg);
    flex: 1 1 auto;
    min-height: 200px;
}
.lp-cmp-preview-body[aria-busy="true"] {
    background: var(--lp-cmp-bg-elev1);
}
.lp-cmp-skeleton {
    height: 200px;
    background: linear-gradient(90deg, var(--lp-cmp-bg-elev2) 0%, var(--lp-cmp-bg-elev3) 50%, var(--lp-cmp-bg-elev2) 100%);
    background-size: 200% 100%;
    animation: lp-cmp-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--lp-cmp-radius-sm);
}
@keyframes lp-cmp-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast */
.lp-cmp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 16px);
    background: #111;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--lp-cmp-radius, 6px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 10200;
    pointer-events: none;
}
.lp-cmp-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.lp-cmp-toast--error { background: #5a1a1a; }
.lp-cmp-toast--success { background: #1a5a3a; }
.lp-cmp-toast--warn { background: #5a3a1a; }

/* Library row v2 chrome (Phase 12 — pencil ↗ + trash + restore) */
.lp-creator__library-actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
/* Library row buttons (.lp-creator__library-pencil/-trash/-trash-restore/
   -trash-delete) styled via canonical variants at L9470+:
     - pencil + trash → .lp-btn--icon-row (added in livingproof-creator.js)
     - trash-restore + trash-delete → .lp-btn--secondary
   Old broken rule deleted (no all:unset, theme accent bled on focus/active). */
.lp-creator__library-pencil-ext {
    margin-left: 2px;
    font-size: 0.8em;
    color: #999;
}
.lp-creator__library-row--clickable {
    cursor: pointer;
}
/* Bug H — Trash retention countdown ("Deletes in N days") rendered before
   the Restore + Delete buttons on trashed rows. */
.lp-creator__library-trash-countdown {
    font-size: 12px;
    color: var(--lp-text-muted, #888);
    margin-right: 8px;
    align-self: center;
}

/* 4.59.27 — Select-all-on-page strip above the Library row list. Sits
   between the toolbar (filters/sort) and the row list. Membership-only;
   JS hides on other sections. */
.lp-creator__library-selectall-row {
    display: flex;
    align-items: center;
    padding: 4px 14px 4px 8px;
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.lp-creator__library-selectall-row[hidden] { display: none; }
.lp-creator__library-selectall-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.lp-creator__library-selectall-label input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* 4.59.25 library-bulk-actions — sticky toolbar + checkbox column. */
.lp-creator__library-bulk-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    flex-wrap: wrap;
}
.lp-creator__library-bulk-toolbar[hidden] { display: none; }
.lp-creator__library-bulk-count {
    font-size: 13px;
    font-weight: 500;
    margin-right: auto;
}
.lp-creator__library-bulk-actions {
    display: inline-flex;
    gap: 6px;
}
.lp-creator__library-bulk-toolbar button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.lp-creator__library-bulk-clear {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
}
.lp-creator__library-bulk-clear:hover { color: rgba(255, 255, 255, 0.9); }
/* 4.59.30 — checkbox column is added only when the row carries --bulk-on
   (set by renderRow when libraryBulkIsEnabled() is true). Default rows
   keep the 4-column template so Published has no empty gutter on the left.
   4.59.26 → 4.59.30 history: previously this rule was unconditional on
   membership rows. */
.lp-creator__library-row--membership.lp-creator__library-row--bulk-on {
    grid-template-columns: 24px 50px 1fr auto auto;
}
.lp-creator__library-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-creator__library-checkbox-cell input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* Mobile drawer (Phase 13). Phase E — !important + bumped specificity so
   the lp-cmp-btn `display: inline-flex` rule (specificity (0,2,1)) does
   not override us on desktop. The mobile media query below re-shows the
   button via the same selector + display: inline-flex !important. */
.lp-composer-takeover button.lp-composer-takeover__drawer-toggle {
    display: none !important;
}
.lp-composer-takeover__drawer-backdrop {
    display: none;
}

@media (max-width: 767px) {
    .lp-composer-takeover button.lp-composer-takeover__drawer-toggle {
        display: inline-flex !important;
    }
    .lp-composer-takeover__sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 75dvh;
        max-height: 75vh;
        transform: translateY(100%);
        transition: transform 200ms ease;
        z-index: var(--lp-z-takeover-floats);
        overscroll-behavior: contain;
        border-top: 1px solid var(--lp-cmp-border);
        border-left: 0;
        flex: 0 0 auto;
    }
    .lp-composer-takeover--drawer-open .lp-composer-takeover__sidebar {
        transform: translateY(0);
    }
    .lp-composer-takeover__drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10005;
    }
    .lp-composer-takeover__editor {
        flex: 1 1 100%;
        padding: 16px;
        padding-bottom: calc(120px + var(--lp-cmp-keyboard-offset, 0px));
    }
    .lp-composer-takeover__main {
        flex-direction: column;
    }
    .lp-cmp-bubble-menu {
        bottom: calc(72px + var(--lp-cmp-keyboard-offset, 0px));
        top: auto !important;
        left: 12px !important;
    }
    .lp-composer-takeover__mode-label {
        font-size: 13px;
    }
    .lp-composer-takeover__topbar {
        gap: 8px;
        padding: 8px 10px;
    }
    .lp-composer-takeover button.lp-cmp-btn {
        padding: 8px 10px;
        min-height: 44px;
        min-width: 44px;
    }
}

/* Reduced motion + forced colors (Phase 13.11/12) */
@media (prefers-reduced-motion: reduce) {
    .lp-composer-takeover,
    .lp-composer-takeover *,
    .lp-cmp-modal-overlay,
    .lp-cmp-toast,
    .lp-cmp-saved-flash {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .lp-composer-takeover {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }
    .lp-composer-takeover button.lp-cmp-btn,
    .lp-cmp-modal__actions .lp-cmp-btn {
        background: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText;
    }
    .lp-composer-takeover button.lp-cmp-btn--primary,
    .lp-cmp-modal__actions .lp-cmp-btn--primary {
        background: Highlight;
        color: HighlightText;
        border: 1px solid HighlightText;
    }
}

/* ---------------------------------------------------------------------------
 * WP Media Library modal — neutralize LP composer-takeover typography that
 * bleeds into the modal's frame title + filter labels. Without these, "Choose
 * featured image" and "Filter media" render at takeover h1 size (~48px).
 * Targets the WP-rendered .media-modal which mounts as a sibling of body.
 * ------------------------------------------------------------------------- */
body.lp-composing .media-modal .media-frame-title h1,
body.lp-composing .media-modal h1 {
    display: none !important;
}
body.lp-composing .media-modal .media-frame-router .media-router a,
body.lp-composing .media-modal .attachment-filters,
body.lp-composing .media-modal .attachment-filters label,
body.lp-composing .media-modal .search-form label,
body.lp-composing .media-modal .media-toolbar label {
    font-size: 13px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.lp-composing .media-modal .attachment-filters label[for],
body.lp-composing .media-modal label.screen-reader-text {
    /* WP labels for filter dropdowns — only show inline label or hide entirely.
       The dropdowns themselves are clear from context. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
}

/* ---------------------------------------------------------------------------
 * Video preview (YouTube embed / external link) + locked Bunny thumbnail.
 * Item 5 fix — these classes were emitted by PHP from v2 ship but no CSS was
 * authored. Without rules: <button> in YouTube placeholder inherited
 * Hello-Elementor + Elementor-Pro accent (big pink/red blob), poster had no
 * sizing, and click-to-load JS handler was never shipped. Rewritten to render
 * the youtube-nocookie iframe directly inline (parity with Bunny iframe).
 * ------------------------------------------------------------------------- */
.lp-video-preview {
    margin: 1.5em 0;
}
.lp-video-preview__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.lp-video-preview__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lp-video-preview__placeholder {
    /* External-link variant only — the YouTube branch now renders the iframe
       directly. */
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.lp-video-preview__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* External-link affordance — neutral pill button overlay (not a giant
   red play button). Per CLAUDE.md "Button/link specificity" — `all: unset`
   plus reapply with elevated specificity to beat Elementor accent. */
.lp-video-preview .lp-video-preview__external,
.lp-video-preview a.lp-video-preview__external,
.lp-video-preview a.lp-video-preview__external:link,
.lp-video-preview a.lp-video-preview__external:visited,
.lp-video-preview a.lp-video-preview__external:hover,
.lp-video-preview a.lp-video-preview__external:focus,
.lp-video-preview a.lp-video-preview__external:active {
    all: unset;
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 120ms ease, transform 120ms ease;
}
.lp-video-preview a.lp-video-preview__external:hover,
.lp-video-preview a.lp-video-preview__external:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    transform: translateY(-1px);
}
.lp-video-preview__cta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.lp-video-preview__cta-msg {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}
.lp-video-preview .lp-cta-button,
.lp-video-preview a.lp-cta-button,
.lp-video-preview a.lp-cta-button:link,
.lp-video-preview a.lp-cta-button:visited,
.lp-video-preview a.lp-cta-button:hover,
.lp-video-preview a.lp-cta-button:focus,
.lp-video-preview a.lp-cta-button:active {
    all: unset;
    display: inline-block;
    background: #fff;
    color: #0a0a0a !important;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity 120ms ease;
}
.lp-video-preview a.lp-cta-button:hover,
.lp-video-preview a.lp-cta-button:focus-visible {
    opacity: 0.85;
}

/* ===========================================================================
 * composer-v2-no-outright-gating
 *
 * Unified video thumbnail (replaces .lp-video-locked* and .lp-video-preview*
 * patterns) + unified CTA card (overlay + inline variants).
 *
 * Markup:
 *   <div class="lp-bunny-video-thumb">
 *     <img class="lp-bunny-video-thumb__poster">
 *     <button class="lp-bunny-video-thumb__play">▶</button>
 *     <!-- free only, hidden by default: -->
 *     <div class="lp-cta-card lp-cta-card--overlay" hidden>
 *       <div class="lp-cta-card__inner">
 *         <h3 class="lp-cta-card__title">Full content restricted to members</h3>
 *         <div class="lp-cta-card__actions">
 *           <button class="lp-cta-card__btn lp-cta-card__btn--preview">Preview</button>
 *           <button class="lp-cta-card__btn lp-cta-card__btn--join">Join</button>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Inline variant (below truncated text in image+text articles): same
 * .lp-cta-card structure, .lp-cta-card--inline modifier instead of overlay.
 * ========================================================================= */

.lp-bunny-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5em 0;
}

.lp-bunny-video-thumb__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 200ms ease;
}

.lp-bunny-video-thumb:hover .lp-bunny-video-thumb__poster {
    filter: brightness(0.85);
}

/* Scoped per CLAUDE.md "Button/link specificity" — `all: unset` plus
   high-specificity .lp-bunny-video-thumb prefix to beat Hello-Elementor +
   Elementor-Pro accent.
   composer-v2-feed-parity round 2 (B4): small dark/translucent circle with
   white triangle (matches Bunny Stream native overlay). Visual parity for
   free + paid — only post-click behavior differs. No box-shadow, no light
   squircle. backdrop-filter intentionally omitted — iOS 3D-context trap
   (CLAUDE.md "Frontend gotchas"). */
.lp-bunny-video-thumb .lp-bunny-video-thumb__play,
.lp-bunny-video-thumb button.lp-bunny-video-thumb__play {
    all: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4) !important; /* defeats Elementor button accent baseline */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
    z-index: 1;
}

.lp-bunny-video-thumb:hover .lp-bunny-video-thumb__play,
.lp-bunny-video-thumb__play:focus-visible {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(0, 0, 0, 0.55) !important; /* defeats Elementor button:hover accent */
}

/* Nudge play triangle visually centered (the SVG has empty space on the
   left of the triangle path — a 2px right shift centers it in the circle). */
.lp-bunny-video-thumb__play svg {
    transform: translateX(2px);
}

.lp-bunny-video-thumb__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Issue D (4.59.3): Option 2 — pre-emitted idle iframe sits behind the
   poster + play button overlay until tapped. pointer-events:none lets
   the tap pass through to .lp-bunny-video-thumb__play. */
.lp-bunny-video-thumb__iframe--idle {
    pointer-events: none;
    opacity: 0;
}

/* On tap, JS adds .lp-bunny-video-thumb--playing — fade out poster +
   play button so the warm iframe takes visual ownership. */
.lp-bunny-video-thumb--playing .lp-bunny-video-thumb__poster,
.lp-bunny-video-thumb--playing .lp-bunny-video-thumb__play {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.lp-bunny-video-thumb--playing .lp-bunny-video-thumb__iframe--idle {
    opacity: 1;
    transition: opacity 160ms ease;
}

/* CTA card — shared base */
.lp-cta-card[hidden] {
    display: none !important;
}
.lp-cta-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
/* composer-v2-feed-parity round 3 (B3): single canonical CTA title across
   the entire membership platform — Onest 14px, lowercase, letter-spaced,
   font-weight 400 (NOT bold), white. The (0,2,0) specificity (.lp-cta-card
   prefix) plus `!important` on font-size / text-transform / font-weight /
   color is the cascade defense against Hello Elementor's `h3` rules,
   Elementor global accent, and any theme `.entry-content h3` overrides
   that previously rendered the title as 20px black bold uppercase on
   detail surfaces (the bug C the user reported). */
.lp-cta-card .lp-cta-card__title {
    margin: 0;
    color: #fff !important;
    font-family: 'Onest', sans-serif;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em;
    text-transform: lowercase !important;
    text-align: center;
    line-height: 1.3;
}
.lp-cta-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Buttons — scoped per CLAUDE.md gotcha (Hello Elementor button cascade).
   `all: unset` then re-apply with elevated specificity (lp-cta-card prefix). */
.lp-cta-card .lp-cta-card__btn,
.lp-cta-card button.lp-cta-card__btn {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    font-family: 'Onest', sans-serif !important; /* defeat Hello Elementor button font-family !important */
    font-size: 12px;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}
.lp-cta-card .lp-cta-card__btn--preview,
.lp-cta-card button.lp-cta-card__btn--preview {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.lp-cta-card .lp-cta-card__btn--preview:hover,
.lp-cta-card .lp-cta-card__btn--preview:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.lp-cta-card .lp-cta-card__btn--join,
.lp-cta-card button.lp-cta-card__btn--join,
.lp-cta-card a.lp-cta-card__btn--join,
.lp-cta-card a.lp-cta-card__btn--join:link,
.lp-cta-card a.lp-cta-card__btn--join:visited,
.lp-cta-card a.lp-cta-card__btn--join:hover,
.lp-cta-card a.lp-cta-card__btn--join:focus,
.lp-cta-card a.lp-cta-card__btn--join:active {
    background: #fff;
    color: #0a0a0a !important;
    text-decoration: none !important;
}
.lp-cta-card .lp-cta-card__btn--join:hover,
.lp-cta-card .lp-cta-card__btn--join:focus-visible,
.lp-cta-card a.lp-cta-card__btn--join:hover,
.lp-cta-card a.lp-cta-card__btn--join:focus-visible {
    opacity: 0.88;
}

/* Overlay variant — sits over a video thumbnail.
   composer-v2-feed-parity (Q9): backdrop-filter dropped — iOS Safari 3D
   context trap (CLAUDE.md "Frontend gotchas"). Replaced with opaque
   rgba(0,0,0,0.92) so the dropped blur isn't visually missed. */
.lp-cta-card--overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 12px 16px;
    opacity: 0;
    transition: opacity 200ms ease;
}
.lp-cta-card--overlay.lp-cta-card--visible {
    opacity: 1;
}

/* Inline variant — sits below truncated body text in image+text articles.
   composer-v2-feed-parity round 5 (C5b): the read-more fade now lives on
   .lp-locked-fade::after (a 300px gradient over the END of the truncated
   body), so the previous .lp-cta-card--inline::before 96px fade is gone.
   Title + Join button stack vertically inside .lp-cta-card__inner. */
.lp-cta-card--inline {
    position: relative;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 24px 0 24px;
    margin: 0;
}

/* composer-v2-feed-parity round 5 (C5b): tall gradient over the bottom of
   a server-truncated body block. Wraps the truncated body in PHP
   (lp_default_truncate_with_cta) so the fade sits inside the body column
   and bleeds into the inline CTA below. No max-height — that would chop
   detail bodies (the round-3 deviation Lou flagged). Fade-only. */
.lp-locked-fade {
    position: relative;
}
.lp-locked-fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 30%, #000 100%);
    pointer-events: none;
}

/* round 3: deleted dead variants —
   `body:not(.lp-theme-dark) .lp-cta-card--inline*` (light-mode CTA) and
   `.lp-cta-card--standalone` (boxed VIEW MEMBERSHIP PLANS). The membership
   platform is always dark (see CLAUDE.md "Theme / surface map"); .lp-cta-card
   only ever renders on /yamato/members/ → dark-mode only. */

/* Standalone wrapper from lp_unauthorized_message — let the post body
   inherit the theme's article column. */
.lp-locked-content--standalone {
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .lp-cta-card--overlay {
        transition: none;
    }
    .lp-bunny-video-thumb__poster,
    .lp-bunny-video-thumb__play {
        transition: none;
    }
}

@media (forced-colors: active) {
    .lp-cta-card__title {
        color: CanvasText;
    }
    .lp-cta-card .lp-cta-card__btn--preview,
    .lp-cta-card .lp-cta-card__btn--join {
        background: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText;
    }
}

/* ---------------------------------------------------------------------------
 * Featured-image info icon + tooltip (composer sidebar)
 *
 * Small (i) badge in the panel <legend>. Hover/focus reveals a tooltip via
 * data-lp-tooltip (CSS-only — no JS popper). Tooltip wraps to ~280px.
 * ------------------------------------------------------------------------- */
.lp-cmp-panel--featured legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-composer-takeover .lp-cmp-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    cursor: help;
    user-select: none;
    transition: border-color 120ms ease, color 120ms ease;
    position: relative;
    line-height: 1;
}
.lp-composer-takeover .lp-cmp-info-icon:hover,
.lp-composer-takeover .lp-cmp-info-icon:focus-visible {
    border-color: #fff;
    color: #fff;
    outline: none;
}
.lp-composer-takeover .lp-cmp-info-icon[data-lp-tooltip]::after {
    content: attr(data-lp-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: 80vw;
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.92);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: opacity 120ms ease;
}
.lp-composer-takeover .lp-cmp-info-icon:hover::after,
.lp-composer-takeover .lp-cmp-info-icon:focus-visible::after {
    opacity: 1;
}

/* composer-thumb v1 (Phase 3) — featured source dropdown + warning. */
.lp-cmp-featured-source-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 8px;
}
.lp-cmp-featured-source-label .lp-cmp-featured-source {
    display: block;
    width: 100%;
    margin-top: 4px;
}
.lp-cmp-featured-warning {
    display: block;
    padding: 8px 10px;
    margin: 8px 0;
    background: rgba(255, 184, 0, 0.12);
    border: 1px solid rgba(255, 184, 0, 0.45);
    border-radius: 4px;
    color: #ffd166;
    font-size: 12px;
}

/* =========================================================================
   THUMBNAIL FOCAL-POINT PICKER (v2 — modal)

   v1's inline sidebar picker was removed. The picker now lives in a
   dedicated modal launched from the composer's "Adjust" button. Modal
   styles below; the render-side wrappers' overflow:hidden adds (in the
   stream / members-grid / composer-preview blocks above) stay — they are
   required by lp_get_focal_style()'s transform:scale() emission.
   ========================================================================= */

.lp-focal-modal {
    position: fixed;
    inset: 0;
    /* 4.59.34 — sits above composer (10000) but BELOW .lp-cmp-modal-overlay
       (10100) so the discard-confirm dialog renders on top when × is clicked
       after a value change. Prior 100000 trapped users in a "composer goes
       black + buttons unresponsive" lockup. */
    z-index: 10090;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-focal-modal[hidden] { display: none; }
body.lp-focal-modal-open { overflow: hidden; }

.lp-focal-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
}

.lp-focal-modal__panel {
    --fx: 50%;
    --fy: 50%;
    --fscale: 1;
    --ffit: cover;
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.lp-focal-modal__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
    min-height: 40px;
    /* No border-bottom — scope tabs row provides the visual divider below. */
}
.lp-focal-modal__close {
    all: unset;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 4px;
    transition: color 120ms ease, background 120ms ease;
}
.lp-focal-modal__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* --- Scope tabs (hybrid-C) -------------------------------------------- */
.lp-focal-modal__scopes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
    .lp-focal-modal__scopes { flex-wrap: wrap; }
}
.lp-focal-modal__scopes-tabs {
    display: inline-flex;
    align-items: center;
    gap: 24px; /* deliberate separation between tabs */
}
/* Bug 8: actions wrapper for "copy to other surfaces" + "edit video thumbnail".
   Both buttons live alongside the scope tabs on the right edge. */
.lp-focal-modal__scopes-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 12px;
    margin-left: auto;
}
/* Block-mode hides both inner buttons (rule below); also hide the empty
   padded wrapper so it doesn't occupy a row on narrow viewports. */
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__scopes-actions {
    display: none !important;
}
.lp-focal-modal__scope {
    all: unset;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0 4px;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color 180ms ease;
}
.lp-focal-modal__scope:hover {
    color: #fff;
}
/* composer-thumb v1 (Phase 3 commit 6) — block-mode hides scope tabs +
   the surface-cards aside. The source preview pane is the only canvas. */
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__scopes-tabs,
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__surfaces,
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__copy-to-others,
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__edit-at-block {
    display: none !important;
}
/* "Copy to other surfaces" + "Edit at video block" affordances — featured mode. */
.lp-focal-modal__copy-to-others,
.lp-focal-modal__edit-at-block {
    all: unset;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 180ms ease;
}
.lp-focal-modal__copy-to-others:hover,
.lp-focal-modal__edit-at-block:hover {
    color: #fff;
}
/* edit-at-block spacing now handled by .lp-focal-modal__scopes-actions gap. */
/* 4.59.52 — Persistent pink-pill active-tab indicator. The prior
   underline relied on Hello Elementor's button:focus background
   accent which disappeared when focus moved to the slider/radio.
   Binding the pink to the --active class keeps it visible through
   any focus transition. */
.lp-focal-modal__scope--active,
.lp-focal-modal__scopes-tabs button.lp-focal-modal__scope--active,
.lp-focal-modal__scopes-tabs button.lp-focal-modal__scope--active:hover,
.lp-focal-modal__scopes-tabs button.lp-focal-modal__scope--active:focus,
.lp-focal-modal__scopes-tabs button.lp-focal-modal__scope--active:active {
    color: #fff !important;
    background: #e91e63 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
}
.lp-focal-modal__scope--active::after {
    /* No underline — the pink pill IS the active indicator. */
    display: none;
}
/* composer-thumb v1 — non-identity surface tabs show a subtle accent
   under the tab label so creators can see at a glance which surfaces
   carry custom framing. */
.lp-focal-modal__scope[data-has-values="1"]:not(.lp-focal-modal__scope--active) {
    color: rgba(120, 200, 255, 0.85);
}

.lp-focal-modal__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 20px;
    padding: 18px;
    overflow: auto;
}

/* --- Source preview (left) -------------------------------------------- */
.lp-focal-modal__source {
    position: relative;
    flex: 1 1 60%;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    overflow: hidden;
    touch-action: none;
}
/* Vignette preview overlay. Renders box-shadow inset on a sibling pseudo
   above the img so it stays visible (inset shadow directly on a replaced
   <img> sometimes gets occluded by the bitmap in Blink). Inline custom
   property --vig (0..100) set by _propagateBus drives blur/spread/alpha.
   Marker stays clickable because the overlay is pointer-events:none. */
.lp-focal-modal__source::after,
.lp-focal-card__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 4; /* above img (z-auto), below marker (z-5) */
    box-shadow: inset 0 0 calc(var(--vig, 0) * 0.8px)
                              calc(var(--vig, 0) * 0.4px)
                              rgba(0, 0, 0, calc(var(--vig, 0) / 100 * 0.85));
}
/* Living Proof stacked wordmark overlay — bottom-left, ~14% of pane height.
   --wm-url is set inline by _propagateBus when adjust.wordmark != 'off'.
   data-wordmark attribute (off|white|black) drives visibility. Mirrors
   the burned-in wordmark on existing Living Proof radio thumbnails. */
/* Frontend wrapper around focal-styled <img>. PHP emits this when the post
   has wordmark set on a surface. position:relative gives the pseudo a
   stacking context; display:block matches img layout so existing
   container-driven sizing (grid cell, feed item, carousel card) still
   applies to the img inside. */
.lp-thumb-wrap {
    display: block;
    position: relative;
    line-height: 0;
}
.lp-thumb-wrap > img {
    display: block;
    max-width: 100%;
}

.lp-focal-modal__source::before,
.lp-focal-card__frame::before,
.lp-cmp-bunny-video__thumb[data-wordmark]::before,
.lp-thumb-wrap[data-wordmark]::before {
    content: '';
    position: absolute;
    left: 4%;
    bottom: 4%;
    width: 22%;
    height: 18%;
    pointer-events: none;
    background-image: var(--wm-url);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    z-index: 3; /* above img, below ::after vignette + marker */
    opacity: 0;
    transition: opacity 80ms ease;
}
.lp-focal-modal__source[data-wordmark="white"]::before,
.lp-focal-modal__source[data-wordmark="black"]::before,
.lp-focal-card__frame[data-wordmark="white"]::before,
.lp-focal-card__frame[data-wordmark="black"]::before,
.lp-cmp-bunny-video__thumb[data-wordmark="white"]::before,
.lp-cmp-bunny-video__thumb[data-wordmark="black"]::before,
.lp-thumb-wrap[data-wordmark="white"]::before,
.lp-thumb-wrap[data-wordmark="black"]::before {
    opacity: 1;
}
.lp-focal-modal__source img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}
/* Block mode: give the source pane a 16:9 frame (matches Bunny player
   surface) so object-fit / object-position set inline by _propagateBus
   produce visible feedback for zoom / fit / drag / bg. */
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__source {
    aspect-ratio: 16 / 9;
    min-height: 0;
}
.lp-focal-modal__panel[data-mode="block"] .lp-focal-modal__source img {
    width: 100%;
    height: 100%;
    max-height: none;
    /* object-fit + object-position set inline by _propagateBus */
}
.lp-focal-modal__source .lp-focal-marker {
    all: unset;
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 50%);
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.15);
    cursor: grab;
    touch-action: none;
    z-index: 5;
    transition: transform 80ms ease;
}
.lp-focal-modal__source .lp-focal-marker::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
}
.lp-focal-modal__source .lp-focal-marker:hover { transform: scale(1.1); }
.lp-focal-modal__source .lp-focal-marker:active { transform: scale(1.15); cursor: grabbing; }

/* --- Surface preview cards (right) ------------------------------------ */
.lp-focal-modal__surfaces {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-focal-modal__surfaces-title {
    margin: 0 0 4px;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.5);
}
.lp-focal-card__label {
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: rgba(255, 255, 255, 0.6);
}

.lp-focal-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-focal-card__frame {
    position: relative;
    width: var(--card-w, 160px);
    height: var(--card-h, 90px);
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
.lp-focal-card__frame img {
    width: 100%;
    height: 100%;
    /* Default baseline; JS writes effective object-fit / object-position /
       transform / padding / background-color inline per surface (with
       !important) from _propagateBus. */
    object-fit: cover;
    display: block;
}
.lp-focal-card--overridden .lp-focal-card__frame {
    box-shadow: 0 0 0 2px rgba(120, 200, 255, 0.6);
}
.lp-focal-card--overridden .lp-focal-card__label {
    color: rgba(120, 200, 255, 0.85);
}

/* --- Footer: controls + actions --------------------------------------- */
.lp-focal-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
}
.lp-focal-modal__controls {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 auto;
}
.lp-focal-modal__zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    min-width: 280px;
}
.lp-focal-modal__zoom-slider {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
}
.lp-focal-modal__zoom-slider:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.lp-focal-modal__zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: grab;
    border: none;
}
.lp-focal-modal__zoom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: grab;
    border: none;
}
.lp-focal-modal__zoom-badge {
    flex: 0 0 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: #fff;
}
.lp-focal-modal__fit,
.lp-focal-modal__bg {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Onest', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}
.lp-focal-modal__fit legend,
.lp-focal-modal__bg legend {
    color: rgba(255, 255, 255, 0.45);
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    margin-right: 4px;
}
.lp-focal-modal__fit label,
.lp-focal-modal__bg label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.lp-focal-modal__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lp-focal-modal__reset,
.lp-focal-modal__cancel,
.lp-focal-modal__save {
    all: unset;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    transition: background 120ms ease, color 120ms ease;
}
.lp-focal-modal__reset {
    color: rgba(255, 255, 255, 0.55);
}
.lp-focal-modal__reset:hover { color: #fff; }
.lp-focal-modal__cancel {
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.lp-focal-modal__cancel:hover { background: rgba(255, 255, 255, 0.08); }
.lp-focal-modal__save--primary {
    background: #fff;
    color: #000;
    font-weight: 500;
}
.lp-focal-modal__save--primary:hover { background: rgba(255, 255, 255, 0.85); }

@media (max-width: 900px) {
    .lp-focal-modal__body {
        flex-direction: column;
    }
    .lp-focal-modal__surfaces {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .lp-focal-modal__group {
        flex: 1 1 auto;
    }
    .lp-focal-modal__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .lp-focal-modal__controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .lp-focal-modal__actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-composer-takeover .lp-cmp-info-icon,
    .lp-composer-takeover .lp-cmp-info-icon::after {
        transition: none;
    }
}

/* =========================================================================
   ACCOUNT ICON REDESIGN (Round 1)
   Patreon-parity 5-tab Account surface inside #lp-account-pane.

   The pane lives only on /yamato/members/, which always sets
   body.lp-theme-dark per CLAUDE.md ("there is no light-mode CTA … light-mode
   variants will be deleted"). All baseline styles below are dark-themed
   directly — no body:not(.lp-theme-dark) rules.

   Locks honored: O6 (sub-tabs inside pane, hide MP nav), O7 (hash router),
   O8 (logout right-aligned via margin-left:auto), L2/L4 (modal + free card).
   Round 2 fills: paid card, picker, recovery, billing, payment methods.
   ========================================================================= */

/* Hide MP's native sub-tabs and any MP form remnants so our 5-tab nav owns
   the surface (O6). The fallback [mepr-account-form] only renders when the
   user is logged-out (rare on /members/). */
#lp-account-pane #mepr-account-nav,
#lp-account-pane .mp_wrapper > h2:first-child,
#lp-account-pane #mepr-account-welcome-message {
    display: none !important;
}

/* Override legacy MP-form-era #lp-account-pane flex layout (sidebar + content)
   and legacy `.lp-account-logout` block (full-width white divider + uppercase
   "LOG OUT" link). The new pane uses block stacking with logout pinned right
   inside the tab nav. Both have to bump specificity to beat the existing
   rules at L2436+ and L2872+. */
#lp-account-pane:has(.lp-account-nav) {
    display: block !important;
    gap: 0 !important;
    padding-top: 0 !important;
}

/* Round-1 logout styling lives inside .lp-account-nav .lp-account-logout —
   this strips the legacy below-pane block treatment. */
#lp-account-pane .lp-account-nav .lp-account-logout {
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    flex: 0 0 auto !important;
}

/* Unified outlined-rectangle button — used by EVERY action/trigger inside
   the pane (Edit, Save, Cancel, Update password, Change password, Remove
   photo, Upgrade, Delete account, modal Cancel).

   Specificity bumped to body.lp-theme-dark #lp-account-pane (0,3,2) to beat
   the EXISTING rule at L8144 (`body.lp-theme-dark #lp-account-pane
   button[type="submit"]`) which forces border-radius: 0 + padding: 8px 32px
   + margin: 24px on submit buttons. Without this prefix, the submit button
   ("save") got sharp corners + extra margin while button-type ("cancel")
   got my 4px-radius rounded shape — visually inconsistent.

   Tied specificity (0,3,2) on both rules → mine wins via cascade order
   (declared later in the file). */
body.lp-theme-dark #lp-account-pane button.lp-account-btn,
body.lp-theme-dark #lp-account-pane input.lp-account-btn,
body.lp-theme-dark #lp-account-pane a.lp-account-btn,
body.lp-theme-dark #lp-account-pane a.lp-account-btn:link,
body.lp-theme-dark #lp-account-pane a.lp-account-btn:visited,
body.lp-theme-dark .lp-account-modal button.lp-account-btn {
    all: unset;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 140px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    transition: background 120ms ease, border-color 120ms ease !important;
    box-shadow: none !important;
    outline: none !important;
}
body.lp-theme-dark #lp-account-pane button.lp-account-btn:hover,
body.lp-theme-dark #lp-account-pane button.lp-account-btn:focus-visible,
body.lp-theme-dark #lp-account-pane input.lp-account-btn:hover,
body.lp-theme-dark #lp-account-pane input.lp-account-btn:focus-visible,
body.lp-theme-dark #lp-account-pane a.lp-account-btn:hover,
body.lp-theme-dark #lp-account-pane a.lp-account-btn:focus-visible,
body.lp-theme-dark .lp-account-modal button.lp-account-btn:hover,
body.lp-theme-dark .lp-account-modal button.lp-account-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
    color: #fff !important;
    outline: none !important;
}
body.lp-theme-dark #lp-account-pane button.lp-account-btn[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Compact variant for tiny inline triggers (Edit, Remove photo). */
body.lp-theme-dark #lp-account-pane button.lp-account-btn.lp-account-field__edit,
body.lp-theme-dark #lp-account-pane button.lp-account-btn.lp-account-avatar__remove {
    min-width: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* Subscription card CTA — keep the outlined treatment to match Save/Cancel,
   no filled white-on-black variant per user feedback ("uniformity"). */
#lp-account-pane button.lp-account-btn.lp-sub-card__cta {
    /* Inherit the standard outlined treatment. */
}

/* Compact variant used by the Patreon-source state CTAs (Manage on Patreon
   + Switch billing to Living Proof). Both buttons now share the unified
   .lp-account-btn outlined treatment, just at a smaller scale than the
   default 10px/20px + min-width:140px sizing.
   Specificity bump (0,4,2) via the extra .lp-sub-card__cta--compact class
   beats the (0,3,2) base rule at L12933. */
body.lp-theme-dark #lp-account-pane a.lp-account-btn.lp-sub-card__cta--compact,
body.lp-theme-dark #lp-account-pane a.lp-account-btn.lp-sub-card__cta--compact:link,
body.lp-theme-dark #lp-account-pane a.lp-account-btn.lp-sub-card__cta--compact:visited,
body.lp-theme-dark #lp-account-pane button.lp-account-btn.lp-sub-card__cta--compact {
    min-width: 0 !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* Danger button — outlined-only, white text + white border (no red); the
   destructive intent comes through via the modal's body copy. Removes the
   pink/red hover state per user feedback. */
#lp-account-pane button.lp-account-btn.lp-account-danger__delete {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}
#lp-account-pane button.lp-account-btn.lp-account-danger__delete:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: #fff !important;
}
.lp-account-modal button.lp-account-btn.lp-account-modal__confirm--danger {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* New tab nav row (O6 + O8). margin-left:auto on logout pushes it to the
   right. gap:1.75rem matches .lp-feed-filters spacing for visual parity.
   flex-wrap: wrap so the logout pill can drop to its own row at narrow
   widths instead of overflowing past the right edge — the ≤600px rule
   below pairs with this to format the dropped-row state. */
.lp-account-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: none;
}

/* Tab buttons — match the feed tab typography (.lp-feed-filters button at
   CSS L6763: 'Onest' / 0.85rem / weight 400 / lowercase / letter-spacing
   0.1em / no chrome). Bumped specificity to beat Hello Elementor /
   Elementor Pro accent (which paints buttons pink/red on :hover/:focus).
   Active state uses pure color shift — no underline — to match the feed-
   tab visual exactly. */
#lp-account-pane button.lp-account-tab,
#lp-account-pane button.lp-account-tab:link,
#lp-account-pane button.lp-account-tab:visited {
    all: unset;
    cursor: pointer !important;
    padding: 0 !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transition: color 180ms ease !important;
}
#lp-account-pane button.lp-account-tab:hover,
#lp-account-pane button.lp-account-tab:focus,
#lp-account-pane button.lp-account-tab:focus-visible,
#lp-account-pane button.lp-account-tab:active {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#lp-account-pane[data-lp-subtab="profile"]         button.lp-account-tab[data-subtab="profile"],
#lp-account-pane[data-lp-subtab="payment-methods"] button.lp-account-tab[data-subtab="payment-methods"] {
    color: #fff !important;
    background: transparent !important;
}

.lp-account-nav .lp-account-logout {
    margin-left: auto;
    display: block;
}

.lp-account-nav .lp-account-logout a,
.lp-account-nav .lp-account-logout a:link,
.lp-account-nav .lp-account-logout a:visited,
.lp-account-nav .lp-account-logout a:active {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    font-family: 'Onest', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: lowercase !important;
    letter-spacing: 0.1em !important;
    transition: color 180ms ease !important;
}

.lp-account-nav .lp-account-logout a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

/* Sub-pane visibility — driven by data-lp-subtab on #lp-account-pane (O7).
   Round 7 restructure: only 3 tabs remain (Account+Profile merged,
   Billing merged into Subscription). */
#lp-account-pane > .lp-account-pane__tab {
    display: none;
}
#lp-account-pane[data-lp-subtab="profile"]         > .lp-account-pane__tab--profile,
#lp-account-pane[data-lp-subtab="payment-methods"] > .lp-account-pane__tab--payment-methods {
    display: block;
}

.lp-account-pane__title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.lp-account-pane__placeholder {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.7);
}

.lp-account-pane__placeholder-sub {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.lp-account-pane__placeholder a,
.lp-account-pane__placeholder-sub a {
    color: #fff;
    text-decoration: underline;
}

/* Avatar block (Q3) — hover-pencil pattern.
   .__trigger wraps the img + overlay (clickable hot zone for the whole
   photo). Hovering or focusing the trigger reveals .__overlay (a 50% black
   tint + centered pencil icon). Click → JS fires the hidden file input
   (native OS picker). The Remove link sits beside the photo as a quiet
   small text trigger; only rendered when an avatar is actually set. */
.lp-account-avatar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#lp-account-pane button.lp-account-avatar__trigger {
    all: unset;
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50% !important;
    overflow: hidden !important;
    cursor: pointer !important;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    outline: none !important;
}
.lp-account-avatar__img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: filter 160ms ease;
}
.lp-account-avatar__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
}
#lp-account-pane button.lp-account-avatar__trigger:hover .lp-account-avatar__overlay,
#lp-account-pane button.lp-account-avatar__trigger:focus-visible .lp-account-avatar__overlay {
    opacity: 1;
}
#lp-account-pane button.lp-account-avatar__trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}
.lp-account-avatar__side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
#lp-account-pane button.lp-account-avatar__remove-link {
    all: unset;
    cursor: pointer !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: underline !important;
    transition: color 120ms ease;
}
#lp-account-pane button.lp-account-avatar__remove-link:hover {
    color: #fff !important;
}
.lp-account-avatar__msg {
    font-size: 12px;
    margin-top: 4px;
    min-height: 1em;
}
.lp-account-avatar__msg--ok  { color: #6fdc8c; }
.lp-account-avatar__msg--err { color: #ff5a6e; }

/* Read-only name caption beside the avatar (QA #7 — inline w/ photo).
   Edits still flow through the Stripe Address Element. */
.lp-account-name-display {
    margin: 0;
    font-family: 'Onest', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-align: left;
    line-height: 1.2;
}

/* Inline-edit field clusters (cloned from lp-inline-pw) */
.lp-account-field {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-account-field:last-of-type { border-bottom: none; }

.lp-account-field__display {
    display: flex;
    align-items: baseline;
    gap: 16px;
}
.lp-account-field__label {
    flex: 0 0 130px;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
}
.lp-account-field__value {
    flex: 1;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #fff;
    word-break: break-word;
}
.lp-account-field__empty {
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
}
.lp-inline-edit {
    margin-top: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.lp-inline-edit[hidden] { display: none; }

.lp-inline-edit__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px;
}
.lp-inline-edit__row > label {
    flex: 1;
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
}
.lp-inline-edit__row--3col > label {
    flex: 1 1 0;
}
.lp-inline-edit__row > label > input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}
.lp-inline-edit__row > label > input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.lp-inline-edit__msg {
    margin: 6px 0 8px;
    min-height: 1em;
    font-size: 12px;
}
.lp-inline-edit__msg--ok  { color: #6fdc8c; }
.lp-inline-edit__msg--err { color: #ff5a6e; }

.lp-inline-edit__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Account tab — sections + change-password trigger */
.lp-account-section {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-account-section:last-of-type { border-bottom: none; }
.lp-account-section__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.lp-account-section__sub {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.lp-account-section__sub--muted {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Round 8 (account-profile-subscription-merge): merged Subscription section
   sits inside Profile between the reverse-opt-out block (or address cluster)
   and the destructive-actions row. Inherits .lp-account-section spacing +
   bottom border; overrides the heading typography to read as a section label
   matching the Account pane's existing field-label scale. */
.lp-account-section--sub {
    margin-top: 8px;
}
.lp-account-section--sub .lp-account-section__title {
    margin: 0 0 14px;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}
/* Subscription tab — cards + danger zone */
.lp-sub-card {
    padding: 20px 22px;
    margin: 0 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}
.lp-sub-card__status {
    margin: 0 0 4px;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-sub-card__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-sub-card__dot--active { background: #4ade80; }
.lp-sub-card__dot--ending { background: #facc15; }
.lp-sub-card__since,
.lp-sub-card__placeholder {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

/* Danger zone — bare title + button per user feedback (no red bg / border). */
.lp-account-danger {
    margin-top: 24px;
    padding: 0;
    border: none;
    background: transparent;
}
.lp-account-danger__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
}

/* Modal scaffolding (Round 1: delete-confirm + upgrade-picker) */
.lp-account-modal[hidden] { display: none; }
.lp-account-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lp-account-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}
.lp-account-modal__panel {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: #181818;
    color: #fff;
    border-radius: 10px;
    padding: 24px 24px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lp-account-modal__title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.lp-account-modal__body {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.5;
}
.lp-account-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.lp-account-modal__footnote {
    margin: 14px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Upgrade picker — centered modal embedding [lp_pricing_cards] flip-cards.
   Reuses /join/'s flip-card UX. The shortcode emits its own #lp-join-modal
   iframe (the register form) which opens on top of this modal when a
   tier's "Join" button is clicked. */
.lp-account-modal--fullscreen {
    padding: 24px !important;
}
.lp-account-modal__panel--fullscreen {
    width: min(96vw, 1100px) !important;
    max-width: 1100px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
    background: #000 !important;
    padding: 56px 32px 36px !important;
    overflow-y: auto !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
.lp-account-modal__upgrade-content {
    max-width: 100%;
    margin: 0 auto;
}
/* The shortcode's .lp-pricing-cards wrap has its own grid; ensure it
   sizes correctly inside the modal (the page-id-2016 overrides on /join/
   don't apply here, so we add fallback layout). */
.lp-account-modal__upgrade-content .lp-pricing-cards {
    width: 100%;
}
.lp-account-modal__upgrade-content .lp-pc-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
}
@media (max-width: 720px) {
    .lp-account-modal__upgrade-content .lp-pc-grid {
        grid-template-columns: 1fr !important;
    }
}
/* Close button — top-right of the panel. */
.lp-account-modal .lp-account-modal__close {
    all: unset;
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    transition: color 120ms ease, background 120ms ease;
}
.lp-account-modal .lp-account-modal__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
/* Hide the "sign up free" link from the embedded shortcode — we're showing
   this to a user who is already signed up free and clicked "Upgrade". */
.lp-account-modal__upgrade-content .lp-join-free {
    display: none !important;
}

/* --- Mobile (≤ 600px): logout drops to its own row beneath the tab nav.
   Extended from ≤375px to ≤600px so iPhone 12/13/14/15 (390–414px) also
   catch the wrap — at those widths the unwrapped row overflows and pushes
   the logout pill past the right edge. The pane-bottom safe-area padding
   keeps the action row (Change password / Delete account) clear of iOS
   Safari's bottom accessory bar. --- */
@media (max-width: 600px) {
    .lp-account-nav .lp-account-logout {
        flex: 1 0 100%;
        margin-left: 0;
        text-align: right;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    #lp-account-pane > .lp-account-pane__tab {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
    }
}

/* --- Mobile (≤ 375px): tighter spacing + field reflow for the smallest
   iPhones. --- */
@media (max-width: 375px) {
    .lp-account-nav {
        gap: 14px;
    }
    .lp-account-nav .lp-account-tab {
        font-size: 13px;
    }
    .lp-account-field__display {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .lp-account-field__label { flex: 0 0 auto; }
    .lp-inline-edit__row--3col {
        flex-direction: column;
    }
}

/* =========================================================================
   ACCOUNT ICON REDESIGN — Round 2 additions
   Modal msg, paid-sub state cards, billing table, payment-methods list,
   Stripe Elements mount, backup-payments toggle. Dark-only baseline (the
   /members/ surface always carries body.lp-theme-dark).
   ========================================================================= */

/* Generic modal-msg slot (used by delete/recover/cancel-sub/add-card/etc) */
.lp-account-modal__msg {
    margin: 0 0 12px;
    min-height: 1.2em;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.lp-account-modal__msg--ok  { color: #6ee7b7; }
.lp-account-modal__msg--err { color: #fca5a5; }

/* Paid-sub card rows + actions */
.lp-sub-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 6px 0 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}
.lp-sub-card__meta-row { white-space: nowrap; }
.lp-sub-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* SUBSCRIPTION REACTIVATION — primary "Reactivate subscription" button reuses
   the .lp-account-btn outlined treatment (rule at #lp-account-pane
   button.lp-account-btn.lp-sub-card__cta). The secondary "Or switch to a
   different tier" is a <button class="lp-link-btn"> styled as a small
   underlined inline link. Per CLAUDE.md "Button / link specificity vs
   theme + Elementor defaults" the secondary needs all: unset + scoped
   re-declaration to beat Hello Elementor's button[type="button"] accent. */
.lp-sub-card__alt {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}
#lp-account-pane .lp-sub-card__alt button.lp-link-btn,
#lp-account-pane .lp-sub-card__alt button[type="button"].lp-link-btn {
    all: unset;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 13px;
    font-family: inherit;
}
#lp-account-pane .lp-sub-card__alt button.lp-link-btn:hover,
#lp-account-pane .lp-sub-card__alt button.lp-link-btn:focus-visible {
    color: #fff;
}

/* Billing tab */
.lp-billing-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 18px;
}
.lp-billing-controls label { color: rgba(255, 255, 255, 0.65); font-size: 13px; }
.lp-billing-controls select {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
}
.lp-billing-month {
    margin: 0 0 22px;
}
.lp-billing-month__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lp-billing-table {
    width: 100%;
    border-collapse: collapse;
}
.lp-billing-table th,
.lp-billing-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}
.lp-billing-table th {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}
.lp-billing-table .lp-billing-row__amount { text-align: right; white-space: nowrap; }
.lp-billing-table .lp-billing-row__action  { text-align: right; white-space: nowrap; }
.lp-billing-table .lp-billing-row__action a,
.lp-billing-table .lp-billing-row__action button {
    color: #fff;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
}
.lp-billing-month__subtotal td {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 0;
    font-weight: 600;
    color: #fff;
}
.lp-billing-empty {
    padding: 24px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Payment methods tab */
.lp-pm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 18px;
    gap: 12px;
}
.lp-pm-cards { display: flex; flex-direction: column; gap: 12px; }
.lp-pm-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.lp-pm-card__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-pm-card__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    font-size: 14px;
}
.lp-pm-card__brand { text-transform: capitalize; font-weight: 600; }
.lp-pm-card__last4 { letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.lp-pm-card__exp   { color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.lp-pm-card__badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
}
.lp-pm-card__linked {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}
.lp-pm-card__actions { display: flex; gap: 8px; flex-shrink: 0; }
.lp-pm-empty {
    padding: 24px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* Stripe Elements mount target — dark theme */
.lp-pm-elements {
    margin: 6px 0 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: #0c0c0c;
    min-height: 50px;
}
.lp-pm-default-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    cursor: pointer;
}
.lp-pm-default-toggle input { accent-color: #fff; }

/* Backup-payments toggle row */
.lp-pm-backup {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-pm-backup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.lp-pm-backup__label { color: #fff; font-size: 14px; }
.lp-pm-backup__copy  { margin: 6px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 12px; }
.lp-pm-backup__switch {
    appearance: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    position: relative;
    cursor: pointer;
    transition: background 0.18s;
}
.lp-pm-backup__switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.18s;
}
.lp-pm-backup__switch:checked            { background: rgba(255, 255, 255, 0.55); }
.lp-pm-backup__switch:checked::before    { transform: translateX(16px); }

/* Mobile shrink */
@media (max-width: 480px) {
    .lp-pm-card { flex-direction: column; align-items: stretch; }
    .lp-pm-card__actions { justify-content: flex-end; }
    .lp-billing-table th, .lp-billing-table td { padding: 8px 4px; }
    .lp-billing-table .lp-billing-row__product { white-space: normal; }
}

/* =========================================================================
   ACCOUNT ICON ROUND 5 — password eye-toggle + upgrade-modal fixes
   ========================================================================= */

/* Password visibility eye-toggle inside .lp-inline-pw form. The eye-icon
   button sits inside the input-wrap (right-edge); .lp-pw-eye__open shows
   when input type='password' (default), .__closed shows after toggle. */
.lp-inline-pw__input-wrap {
    position: relative;
    display: block;
}
.lp-inline-pw__input-wrap > input[type="password"],
.lp-inline-pw__input-wrap > input[type="text"] {
    width: 100%;
    padding-right: 44px !important; /* room for the eye button */
    box-sizing: border-box;
}
#lp-account-pane button.lp-pw-toggle {
    all: unset;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: color 120ms ease, background 120ms ease;
}
#lp-account-pane button.lp-pw-toggle:hover,
#lp-account-pane button.lp-pw-toggle:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}
.lp-pw-eye__closed { display: none; }
.lp-pw-toggle[aria-pressed="true"] .lp-pw-eye__open { display: none; }
.lp-pw-toggle[aria-pressed="true"] .lp-pw-eye__closed { display: inline-block; }

/* Upgrade-modal — narrow flip-card layout fixes.

   The /join page renders flip-cards with ~390px width each. Inside our
   centered upgrade modal (~1100px max width split 3-up = ~340px per card
   with gaps), the title strip on the magazine tier ("living proof magazine:
   premium") was overlapping the absolutely-positioned $20 price.

   Modal-scoped overrides: shrink the title font slightly, allow it to wrap
   to 2 lines if needed, AND re-flow the price to a centered second row on
   long-title cards. Other tabs/pages unaffected. */
.lp-account-modal__upgrade-content .lp-pc-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: center !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
}
.lp-account-modal__upgrade-content .lp-pc-bottom-title {
    position: static !important;
    padding: 0 !important;
    white-space: normal !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
}
.lp-account-modal__upgrade-content .lp-pc-bottom-price {
    position: static !important;
    transform: none !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Make sure .lp-pc-card inside the modal is clickable (some Elementor
   contexts apply pointer-events: none to ::before/::after pseudo-elements
   that bleed onto descendants). Plus a clearer hover affordance. */
.lp-account-modal__upgrade-content .lp-pc-card {
    cursor: pointer !important;
    pointer-events: auto !important;
}
.lp-account-modal__upgrade-content .lp-pc-card-front,
.lp-account-modal__upgrade-content .lp-pc-card-back,
.lp-account-modal__upgrade-content .lp-pc-card-inner {
    pointer-events: auto !important;
}

/* =========================================================================
   EMAIL CHANGE VERIFICATION — pending badge + flash banner
   Dark-only baseline per CLAUDE.md (Profile tab only renders on /members/).
   ========================================================================= */

body.lp-theme-dark #lp-account-pane .lp-pending-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__icon {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__text {
    flex: 1 1 auto;
    min-width: 0;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__new {
    color: #fff;
    font-weight: 500;
    word-break: break-all;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__expires {
    display: inline-block;
    margin-left: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}
body.lp-theme-dark #lp-account-pane button.lp-pending-email__resend,
body.lp-theme-dark #lp-account-pane button.lp-pending-email__cancel {
    all: unset;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0;
    background: none;
    border: none;
    transition: color 0.15s ease;
}
body.lp-theme-dark #lp-account-pane button.lp-pending-email__resend:hover,
body.lp-theme-dark #lp-account-pane button.lp-pending-email__cancel:hover {
    color: #fff;
}
body.lp-theme-dark #lp-account-pane button.lp-pending-email__resend:disabled,
body.lp-theme-dark #lp-account-pane button.lp-pending-email__cancel:disabled {
    opacity: 0.55;
    cursor: default;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__msg {
    flex: 1 1 100%;
    min-height: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__msg:empty {
    display: none;
}
body.lp-theme-dark #lp-account-pane .lp-pending-email__msg--ok  { color: #6fdc8c; }
body.lp-theme-dark #lp-account-pane .lp-pending-email__msg--err { color: #ff5a6e; }

/* Top-of-pane flash banner — fallback when the email field's inline-edit
   slot isn't available at render time. */
body.lp-theme-dark #lp-account-pane .lp-account-flash {
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.35;
}
body.lp-theme-dark #lp-account-pane .lp-account-flash--ok {
    background: rgba(111, 220, 140, 0.12);
    border: 1px solid rgba(111, 220, 140, 0.35);
    color: #cdf3d8;
}
body.lp-theme-dark #lp-account-pane .lp-account-flash--err {
    background: rgba(255, 90, 110, 0.10);
    border: 1px solid rgba(255, 90, 110, 0.35);
    color: #ffd0d6;
}

@media (max-width: 480px) {
    body.lp-theme-dark #lp-account-pane .lp-pending-email {
        flex-direction: column;
        align-items: flex-start;
    }
    body.lp-theme-dark #lp-account-pane .lp-pending-email__actions {
        width: 100%;
        justify-content: flex-end;
    }
    body.lp-theme-dark #lp-account-pane .lp-pending-email__expires {
        display: block;
        margin-left: 0;
        margin-top: 0.15rem;
    }
}

/* =========================================================================
   ACCOUNT ICON ROUND 7 — restructure (5 tabs → 3)
   Account + Billing merged into Profile + Subscription respectively.
   .lp-account-billing__title is the section header for the billing
   block that lives below the active sub card on the merged Subscription
   tab. Sized as a 3-tier h3 to nest visually under the .lp-account-pane__title
   ("Subscription").
   ========================================================================= */
.lp-account-billing {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-account-billing__title {
    margin: 0 0 18px;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
}

/* =========================================================================
   ACCOUNT ICON ROUND 8 — Profile inline action row + 2FA removed
   ========================================================================= */

/* Inline row for Change password + Delete account at the bottom of Profile.
   Buttons sit side-by-side (gap from .lp-account-btn min-width = 140px each
   with 12px gap). Stacks vertically on narrow viewports. */
.lp-account-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 480px) {
    .lp-account-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* The lp-inline-pw form (revealed by Change password trigger) sits BELOW
   the action row when expanded. Round 8: span full width, distinct from
   the buttons' inline layout. */
#lp-account-pane form.lp-inline-pw {
    margin-top: 18px;
    width: 100%;
}

/* =========================================================================
   ACCOUNT ICON ROUND 9 — Stripe Address Element wrapper
   The Element renders its own inputs styled via the appearance API in JS.
   We only style the surrounding wrapper, the Save/Cancel button row, and
   the loading placeholder.
   ========================================================================= */

.lp-account-field--address .lp-address-edit {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.lp-account-field--address .lp-address-edit[hidden] {
    display: none;
}
.lp-address-element {
    min-height: 80px;
}
.lp-address-element__loading {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    padding: 18px 0;
    text-align: center;
}

/* =========================================================================
   ACCOUNT ICON ROUND 10 — intlTelInput dark-theme overrides on Profile
   The widget brings its own .iti baseline; we bump the rendered surface
   inside the lp-inline-edit form so the flag dropdown reads as part of
   our outlined-on-black aesthetic.
   ========================================================================= */

#lp-account-pane .lp-account-field[data-field="phone"] .iti {
    width: 100%;
    display: block;
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__flag-container {
    background: transparent;
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__selected-flag {
    background: rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__selected-flag:hover,
#lp-account-pane .lp-account-field[data-field="phone"] .iti__selected-flag:focus {
    background: rgba(255, 255, 255, 0.1);
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti--separate-dial-code .iti__selected-dial-code {
    color: #fff;
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__country-list {
    background: #181818;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__country.iti__highlight {
    background: rgba(255, 255, 255, 0.1);
}
#lp-account-pane .lp-account-field[data-field="phone"] .iti__divider {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   PHONE FIELD FIX — restore intl-tel-input expected styling inside .iti
   wrapper. The dark-theme inputs reset (~line 8086) strips padding-left +
   border via !important, so typed digits paint at the input's left edge,
   visually colliding with the absolutely-positioned .iti__flag-container.
   Re-establish a left padding wide enough for the longest dial code (+44 ≈
   70-90px) so digits start to the right of the prefix. Also load the v16
   flag sprite from jsdelivr — MemberPress's bundled CSS resolves the sprite
   to wp-content/plugins/memberpress/css/vendor/images/flags.png which 404s.
   ========================================================================= */
body.lp-theme-dark #lp-account-pane .iti input[type="tel"] {
    padding: 4px 0 4px 90px !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: transparent !important;
    color: #fff !important;
}
body.lp-theme-dark #lp-account-pane .iti input[type="tel"]:focus {
    border-bottom-color: #fff !important;
}
.iti__flag {
    background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@16/build/img/flags.png') !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url('https://cdn.jsdelivr.net/npm/intl-tel-input@16/build/img/flags@2x.png') !important;
    }
}

/* =========================================================================
   ACCOUNT ICON ROUND 11 — multi-line address display
   When an Address value contains <br> line breaks, force the value slot
   to render block-level so each line stacks. Stays inside the existing
   .lp-account-field__display flex row (Edit button on the right).
   ========================================================================= */

.lp-account-field__value--multiline {
    display: block;
    line-height: 1.45;
    white-space: normal;
}
.lp-account-field--address .lp-account-field__display {
    align-items: flex-start;
}
.lp-account-field--address .lp-account-field__label {
    /* Pad the label down a hair so it visually aligns with the first
       line of the multi-line value. */
    padding-top: 1px;
}

/* =========================================================================
   ACCOUNT ICON ROUND 12 §2 — picker switch-mode CTA states
   .lp-pc-current-tier replaces the back-card Join button on the user's
   current tier (non-clickable, muted). .lp-pc-switch is a modifier
   class on .lp-pc-join for non-current tiers in switch mode (text
   becomes "Switch — $X/mo", same visual chrome).
   ========================================================================= */

.lp-pc-current-tier {
    display: block;
    margin-top: 16px;
    padding: 11px 24px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: default;
    user-select: none;
}

/* Switch variant of .lp-pc-join — same chrome as upgrade mode (uses the
   existing .lp-pc-join styling), but distinguishable for analytics /
   future styling tweaks. The class also disables the iframe-modal click
   handler in feed.js (capture-phase intercept routes to AJAX swap). */
.lp-pc-join.lp-pc-switch {
    /* Inherits .lp-pc-join base styling; this rule exists for future use
       and selector specificity hooks. */
}

/* =========================================================================
   ACCOUNT ICON ROUND 13 — switch flow confirm + address panels
   The upgrade-picker modal has 3 internal steps driven by data-step:
   "cards" (default — flip cards), "confirm" (switch proration preview),
   "address" (collect shipping when target tier needs it). CSS toggles
   visibility based on data-step on #lp-modal-upgrade-picker.
   ========================================================================= */

[data-step-panel="confirm"],
[data-step-panel="address"] {
    display: none;
}
#lp-modal-upgrade-picker[data-step="confirm"] [data-step-panel="confirm"],
#lp-modal-upgrade-picker[data-step="address"] [data-step-panel="address"] {
    display: block;
}
#lp-modal-upgrade-picker[data-step="confirm"] .lp-account-modal__upgrade-content,
#lp-modal-upgrade-picker[data-step="address"] .lp-account-modal__upgrade-content {
    display: none;
}

.lp-switch-confirm,
.lp-switch-address {
    max-width: 540px;
    margin: 60px auto 0;
    padding: 36px 32px 28px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}
.lp-switch-confirm__title,
.lp-switch-address__title {
    margin: 0 0 18px;
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.lp-switch-confirm__copy,
.lp-switch-address__copy {
    margin: 0 0 14px;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.lp-switch-confirm__copy strong,
.lp-switch-address__copy strong {
    font-weight: 600;
    color: #fff;
}
.lp-switch-confirm__proration {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}
.lp-switch-confirm__proration:empty {
    display: none;
}
.lp-switch-confirm__msg,
.lp-switch-address__msg {
    margin: 0 0 14px;
    min-height: 1em;
    font-size: 0.85rem;
}
.lp-switch-confirm__msg--err,
.lp-switch-address__msg--err {
    color: #ff5a6e;
}
.lp-switch-confirm__msg--ok,
.lp-switch-address__msg--ok {
    color: #6fdc8c;
}
.lp-switch-confirm__actions,
.lp-switch-address__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.lp-switch-address__element {
    margin: 16px 0;
    min-height: 120px;
}

/* Switch-panel shipping opt-out — Phase 2 §10. Scoped under
   .lp-switch-address__optout to avoid colliding with the modal-mode
   .lp-shipping-optout block (modal-mode lives behind ?modal=1 on
   memberpressproduct posts; this lives inside /members/ dashboard). */
.lp-switch-address__optout {
    margin: 4px 0 14px;
}
.lp-switch-address__optout .lp-shipping-optout {
    display: block;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}
.lp-switch-address__optout .lp-shipping-optout > label {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}
.lp-switch-address__optout .lp-shipping-optout input[type="checkbox"] {
    flex-shrink: 0;
}
.lp-switch-address__optout .lp-shipping-optout__disclaimer {
    margin: 6px 0 0;
    padding: 0 0 4px 22px;
    font-family: 'Onest', sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.65);
}

/* =============================================================================
 * PROFILE REVERSE OPT-OUT — Phase 2 §12. Toggle + inline address picker on
 * the Profile tab. Renders only for users with lp_no_physical_fulfillment=1
 * AND on a physical-shipping tier. Dark-only surface (members dashboard).
 * ========================================================================== */
.lp-profile-reverse-optout {
    margin: 18px 0 22px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.lp-profile-reverse-optout .lp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    color: #fff;
    user-select: none;
}
.lp-profile-reverse-optout .lp-toggle input[type="checkbox"] {
    /* visually hidden; the .lp-toggle__switch span renders the visible track. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.lp-profile-reverse-optout .lp-toggle__switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 11px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
.lp-profile-reverse-optout .lp-toggle__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}
.lp-profile-reverse-optout .lp-toggle input[type="checkbox"]:checked + .lp-toggle__switch {
    background: #6fdc8c;
}
.lp-profile-reverse-optout .lp-toggle input[type="checkbox"]:checked + .lp-toggle__switch::after {
    transform: translateX(16px);
}
.lp-profile-reverse-optout .lp-toggle input[type="checkbox"]:focus-visible + .lp-toggle__switch {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}
.lp-profile-reverse-optout .lp-toggle__label {
    line-height: 1.3;
}
.lp-profile-reverse-optout .lp-toggle__sub {
    margin: 6px 0 0 50px;
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}
.lp-reverse-optout-address {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-reverse-optout-address #lp-profile-reverse-optout-address {
    min-height: 120px;
    margin-bottom: 12px;
}
.lp-reverse-optout-msg {
    margin: 6px 0;
    min-height: 1em;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
}
.lp-reverse-optout-msg.lp-inline-edit__msg--err { color: #ff5a6e; }
.lp-reverse-optout-msg.lp-inline-edit__msg--ok  { color: #6fdc8c; }
.lp-reverse-optout-actions {
    display: flex;
    justify-content: flex-end;
}

/* =============================================================================
 * CREATOR BUNNY MEDIA MANAGER (creator-bunny-media-manager)
 * Scoped to .lp-creator-media (manager view) + .lp-bunny-picker (picker modal).
 * /creator/ is dark by default — base styling assumes dark surface.
 * ========================================================================== */

.lp-creator-media {
    color: #e5e5e5;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
}

.lp-creator-media-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 16px;
}

.lp-creator-media .lp-mediatab {
    all: unset;
    box-sizing: border-box;
    padding: 10px 16px;
    cursor: pointer;
    color: #a3a3a3;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.lp-creator-media .lp-mediatab:hover {
    color: #e5e5e5;
}

.lp-creator-media .lp-mediatab--active {
    color: #fff;
    border-bottom-color: #fff;
}

/* Pane visibility — toggled by data-lp-mediatab on the container */
.lp-creator-media .lp-media-pane[hidden] { display: none; }

.lp-media-pane {
    padding: 8px 0;
}

.lp-media-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.lp-media-search {
    flex: 1 1 180px;
    min-width: 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5e5e5;
    font-family: inherit;
    font-size: 14px;
    border-radius: 4px;
}
.lp-media-search::placeholder { color: #6b6b6b; }

.lp-media-sort {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5e5e5;
    font-family: inherit;
    font-size: 14px;
    border-radius: 4px;
}

.lp-media-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Category chip row sits above the type-pill toolbar (Manager) and below the
 * search/show-imports row (Picker). Forced to its own row via width:100% so
 * it lays out cleanly inside the existing flex toolbars. */
.lp-media-pills--cats {
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
}
.lp-creator-media .lp-media-pill--cat,
.lp-bunny-picker .lp-media-pill--cat {
    font-size: 12px;
}

.lp-creator-media .lp-media-pill,
.lp-bunny-picker .lp-media-pill {
    all: unset;
    box-sizing: border-box;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #a3a3a3;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lp-creator-media .lp-media-pill:hover,
.lp-bunny-picker .lp-media-pill:hover {
    color: #e5e5e5;
    border-color: rgba(255, 255, 255, 0.24);
}
.lp-creator-media .lp-media-pill--active,
.lp-bunny-picker .lp-media-pill--active {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Picker is height-constrained — chip row scrolls horizontally on mobile so
 * the modal doesn't grow taller than its single-row toolbar baseline.
 * Manager keeps flex-wrap (lots of vertical space). */
@media (max-width: 600px) {
    .lp-bunny-picker__toolbar--library .lp-media-pills--cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    .lp-bunny-picker__toolbar--library .lp-media-pill--cat {
        flex: 0 0 auto;
    }
}

.lp-media-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a3a3a3;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.lp-media-toggle input { accent-color: #fff; }

.lp-creator-media .lp-media-bulk-delete {
    all: unset;
    box-sizing: border-box;
    padding: 8px 14px;
    background: #b91c1c;
    color: #fff;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lp-creator-media .lp-media-bulk-delete[disabled] {
    background: rgba(255, 255, 255, 0.08);
    color: #6b6b6b;
    cursor: not-allowed;
}

.lp-media-bulk-info { color: #a3a3a3; font-size: 13px; }

.lp-media-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-media-list[aria-busy="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.lp-media-row {
    display: grid;
    grid-template-columns: 28px 56px 1fr auto auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-media-row__select { justify-self: center; }
.lp-media-row__select input { accent-color: #fff; }

.lp-media-row__thumb {
    width: 56px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b6b6b;
    font-size: 11px;
    text-transform: uppercase;
}
.lp-media-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.lp-media-row__main { min-width: 0; }
.lp-media-row__title {
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lp-media-row__sub {
    color: #6b6b6b;
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-media-row__type,
.lp-media-row__size,
.lp-media-row__date {
    color: #a3a3a3;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.lp-media-row__actions {
    display: flex;
    gap: 6px;
    justify-self: end;
}

.lp-creator-media .lp-media-action {
    all: unset;
    box-sizing: border-box;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-creator-media .lp-media-action:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
}
.lp-creator-media .lp-media-action--danger {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.32);
}
.lp-creator-media .lp-media-action--danger:hover {
    background: rgba(185, 28, 28, 0.16);
    color: #fff;
}

.lp-media-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0 8px;
    color: #a3a3a3;
    font-size: 13px;
}

.lp-creator-media .lp-media-page-btn {
    all: unset;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: #e5e5e5;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}
.lp-creator-media .lp-media-page-btn[disabled] {
    color: #555;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.06);
}

.lp-media-page-info { padding: 5px 10px; }

.lp-media-archive-hint,
.lp-media-audit-hint {
    margin: 0;
    color: #a3a3a3;
    font-size: 12px;
}

.lp-media-list--audit .lp-media-row {
    grid-template-columns: 140px 90px 1fr auto auto auto;
}
.lp-media-list--audit .lp-media-row__title { font-size: 13px; }

.lp-media-empty {
    padding: 32px 12px;
    color: #6b6b6b;
    text-align: center;
    font-size: 14px;
}

/* Light-theme parity (just in case the manager opens on a light surface) */
body:not(.lp-theme-dark) .lp-creator-media {
    color: #1a1a1a;
}
body:not(.lp-theme-dark) .lp-creator-media .lp-mediatab { color: #555; }
body:not(.lp-theme-dark) .lp-creator-media .lp-mediatab--active {
    color: #000;
    border-bottom-color: #000;
}
body:not(.lp-theme-dark) .lp-media-search,
body:not(.lp-theme-dark) .lp-media-sort {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.16);
    color: #1a1a1a;
}

/* =============================================================================
 * BUNNY DELETE CONFIRM MODAL
 * ========================================================================== */

.lp-bunny-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lp-bunny-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e5e5e5;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.lp-bunny-modal__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #fff;
}

.lp-bunny-modal__body p { margin: 0 0 12px; line-height: 1.5; }
.lp-bunny-modal__body code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
    word-break: break-all;
}

.lp-bunny-modal__input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    border-radius: 4px;
    margin: 8px 0 16px;
    box-sizing: border-box;
}

.lp-bunny-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lp-bunny-modal .lp-bunny-modal-btn {
    all: unset;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.lp-bunny-modal .lp-bunny-modal-btn--cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    color: #e5e5e5;
}
.lp-bunny-modal .lp-bunny-modal-btn--confirm {
    background: #b91c1c;
    color: #fff;
}
.lp-bunny-modal .lp-bunny-modal-btn--confirm[disabled] {
    background: rgba(185, 28, 28, 0.32);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* =============================================================================
 * BUNNY PICKER MODAL (Phase 2)
 * ========================================================================== */

.lp-bunny-picker {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.lp-bunny-picker[hidden] { display: none; }

.lp-bunny-picker__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
}

.lp-bunny-picker__modal {
    position: relative;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e5e5e5;
    max-width: 880px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    font-family: 'Onest', sans-serif;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.lp-bunny-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    gap: 16px;
}

.lp-bunny-picker__type-tabs {
    display: flex;
    gap: 4px;
}

.lp-bunny-picker .lp-bunny-picker__type-tab {
    all: unset;
    box-sizing: border-box;
    padding: 6px 14px;
    color: #a3a3a3;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
}
.lp-bunny-picker .lp-bunny-picker__type-tab[aria-selected="true"] {
    background: #fff;
    color: #000;
}

.lp-bunny-picker .lp-bunny-picker__close {
    all: unset;
    box-sizing: border-box;
    padding: 4px 8px;
    color: #a3a3a3;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.lp-bunny-picker .lp-bunny-picker__close:hover { color: #fff; }

.lp-bunny-picker__sub-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lp-bunny-picker .lp-bunny-picker__sub-tab {
    all: unset;
    box-sizing: border-box;
    padding: 8px 14px;
    color: #a3a3a3;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.lp-bunny-picker .lp-bunny-picker__sub-tab[aria-selected="true"] {
    color: #fff;
    border-bottom-color: #fff;
}

.lp-bunny-picker__toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.lp-bunny-picker__body {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
    min-height: 200px;
}

.lp-bunny-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.lp-bunny-picker .lp-bunny-picker__card {
    all: unset;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
    position: relative;
}
.lp-bunny-picker .lp-bunny-picker__card:hover {
    border-color: rgba(255, 255, 255, 0.32);
}
.lp-bunny-picker .lp-bunny-picker__card[aria-selected="true"] {
    border-color: #fff;
    box-shadow: 0 0 0 2px #fff;
}
.lp-bunny-picker .lp-bunny-picker__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-bunny-picker__card-fallback {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b6b6b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lp-bunny-picker__card-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    font-size: 11px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-bunny-picker__dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    color: #a3a3a3;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.lp-bunny-picker__dropzone:hover,
.lp-bunny-picker__dropzone--active {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* 4.59.60 — thumbnail-at-timestamp upload option (video only). */
.lp-bunny-picker__thumb-time-row {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-bunny-picker__thumb-time-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.lp-bunny-picker__thumb-time {
    width: 110px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
}
.lp-bunny-picker__thumb-time-zero {
    margin-left: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    cursor: pointer;
}
.lp-bunny-picker__thumb-time-zero:hover {
    background: rgba(255, 255, 255, 0.15);
}
.lp-bunny-picker__thumb-time-help {
    margin: 8px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* composer-asset-consolidation: progress now wraps a track + cancel
   button. The old 6px-tall track styling moves to the inner -track. */
.lp-bunny-picker__upload-progress {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-bunny-picker__upload-progress-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.lp-bunny-picker__upload-progress-bar {
    height: 100%;
    background: #fff;
    width: 0;
    transition: width 0.18s;
}
/* Cancel button — uses the all:unset + (0,2,1) specificity pattern from
   CLAUDE.md "Frontend gotchas — Button / link specificity" to beat
   Hello Elementor + Elementor-pro button defaults. */
.lp-bunny-picker__upload-progress button.lp-bunny-picker__upload-cancel {
    all: unset;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    color: #d4d4d4;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lp-bunny-picker__upload-progress button.lp-bunny-picker__upload-cancel:hover,
.lp-bunny-picker__upload-progress button.lp-bunny-picker__upload-cancel:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.lp-bunny-picker__upload-error {
    margin-top: 12px;
    color: #fca5a5;
    font-size: 13px;
}

.lp-bunny-picker__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.lp-bunny-picker__pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 12px 16px 0;
    color: #a3a3a3;
    font-size: 13px;
}

.lp-bunny-picker .lp-bunny-picker-btn {
    all: unset;
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.lp-bunny-picker .lp-bunny-picker-btn--cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    color: #e5e5e5;
}
.lp-bunny-picker .lp-bunny-picker-btn--insert {
    background: #fff;
    color: #000;
}
.lp-bunny-picker .lp-bunny-picker-btn--insert[disabled] {
    background: rgba(255, 255, 255, 0.16);
    color: #6b6b6b;
    cursor: not-allowed;
}

.lp-bunny-picker__loading {
    text-align: center;
    color: #a3a3a3;
    padding: 32px 12px;
    font-size: 13px;
}

@media (max-width: 600px) {
    .lp-bunny-picker { padding: 0; }
    .lp-bunny-picker__modal {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* =============================================================================
 * bunny-video-thumbnail-postencode-picker — Step 2 wait-and-pick pane.
 *
 * Two phases share the pane:
 *   1) Encoding wait: status row visible, scrubber + preview hidden.
 *   2) Frame pick: scrubber + (optional) preview strip visible, status row
 *      hidden. Use-frame CTA fires the canvas extraction; Skip falls back to
 *      Bunny's default thumbnail.
 *
 * Specificity: rules scope under .lp-bunny-picker to beat Hello Elementor
 * defaults on .lp-bunny-picker__use-frame / __skip-thumb without !important.
 * ============================================================================= */
.lp-bunny-picker__pane--thumbpick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    max-width: 100%;
}
.lp-bunny-picker__encode-status {
    font-size: 14px;
    color: #d4d4d4;
    background: #1f1f1f;
    border: 1px solid #303030;
    border-radius: 6px;
    padding: 12px 14px;
    text-align: center;
    line-height: 1.45;
}
.lp-bunny-picker__preview-strip {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    background: #0e0e0e;
    image-rendering: smooth;
}
.lp-bunny-picker__scrubber-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-bunny-picker__scrubber-video {
    width: 100%;
    max-height: 60vh;
    background: #000;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 4px;
}
.lp-bunny-picker__scrubber-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-bunny-picker__scrubber {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    outline: none;
}
.lp-bunny-picker__scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 2px solid #888;
    cursor: pointer;
}
.lp-bunny-picker__scrubber::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 2px solid #888;
    cursor: pointer;
}
.lp-bunny-picker__scrubber:focus-visible {
    outline: 2px solid #6ab0ff;
    outline-offset: 2px;
}
.lp-bunny-picker__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: #d4d4d4;
    min-width: 80px;
    text-align: right;
}
.lp-bunny-picker__thumb-status {
    font-size: 13px;
    color: #76d97a;
    padding: 4px 0;
}
.lp-bunny-picker__thumbpick-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-bunny-picker .lp-bunny-picker__use-frame,
.lp-bunny-picker .lp-bunny-picker__skip-thumb {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 120ms ease, opacity 120ms ease;
}
.lp-bunny-picker .lp-bunny-picker__use-frame {
    background: #2563eb;
    color: #ffffff;
    border-color: #1e40af;
}
.lp-bunny-picker .lp-bunny-picker__use-frame:hover:not([disabled]) {
    background: #1d4ed8;
}
.lp-bunny-picker .lp-bunny-picker__use-frame[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.lp-bunny-picker .lp-bunny-picker__skip-thumb {
    background: transparent;
    color: #d4d4d4;
    border-color: #404040;
}
.lp-bunny-picker .lp-bunny-picker__skip-thumb:hover {
    background: #1f1f1f;
}
.lp-bunny-picker__thumbpick-error {
    font-size: 13px;
    color: #f87171;
    padding: 6px 0;
}

/* NodeView encoding state (D3=B greyout in the composer). */
.lp-cmp-bunny-video[data-encoding="true"] .lp-cmp-bunny-video__thumb-btn {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .lp-bunny-picker__scrubber-video { max-height: 40vh; }
    .lp-bunny-picker__thumbpick-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .lp-bunny-picker .lp-bunny-picker__use-frame,
    .lp-bunny-picker .lp-bunny-picker__skip-thumb {
        width: 100%;
        min-height: 44px;
    }
    .lp-bunny-picker__scrubber::-webkit-slider-thumb { width: 28px; height: 28px; }
    .lp-bunny-picker__scrubber::-moz-range-thumb { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-bunny-picker .lp-bunny-picker__use-frame,
    .lp-bunny-picker .lp-bunny-picker__skip-thumb {
        transition: none;
    }
}

/* =============================================================================
 * SITE CONTROLS — /creator/#site-controls
 *
 * Cards for banner editor, home background editor, magazine + news pins.
 * Dual-iframe preview modal scaffolding. Tier-name inline rename row.
 * Mobile tier-order dropdown (lives on Tiers settings strip).
 *
 * Specificity rationale: scoped under `.lp-creator__section` or
 * `.lp-cdash-site-controls` to beat baseline button rules from Hello
 * Elementor without resorting to `!important` everywhere.
 * ============================================================================= */
.lp-cdash-site-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
    padding: 8px 0 24px;
    color-scheme: dark;
    font-family: 'Onest', sans-serif;
}

.lp-cdash-sc-card {
    background: #171717;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 12px 14px;
}

/* Banner card splits its two fields (title + cover image) into 2 columns;
   title/hint/actions/history span the full width. Pure CSS via section attr. */
.lp-cdash-sc-card[data-section="banner"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 0;
}

.lp-cdash-sc-card[data-section="banner"] > h2,
.lp-cdash-sc-card[data-section="banner"] > p,
.lp-cdash-sc-card[data-section="banner"] > .lp-cdash-sc-actions,
.lp-cdash-sc-card[data-section="banner"] > .lp-cdash-sc-history {
    grid-column: 1 / -1;
}

/* Specificity bump — Hello Elementor's `h2` rule wins over plain
   `.lp-cdash-sc-card__title (0,1,0)`, so scope under .lp-creator__section
   to reach (0,2,1) and explicitly set font-family + size to escape the
   theme heading cascade. */
.lp-creator__section h2.lp-cdash-sc-card__title,
.lp-cdash-site-controls h2.lp-cdash-sc-card__title {
    font-family: 'Onest', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 2px !important;
    color: #fff;
}

.lp-cdash-sc-card__hint {
    font-family: 'Onest', sans-serif;
    font-size: 0.78rem;
    color: #a3a3a3;
    margin: 0 0 10px;
    line-height: 1.4;
}

.lp-cdash-sc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.lp-cdash-sc-field > label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lp-cdash-sc-input {
    width: 100%;
    padding: 8px 12px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    box-sizing: border-box;
}

.lp-cdash-sc-input::placeholder {
    color: #6b6b6b;
}

select.lp-cdash-sc-input {
    color-scheme: dark;
}

.lp-cdash-sc-meta {
    font-size: 0.75rem;
    color: #a3a3a3;
}

.lp-cdash-sc-image {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lp-cdash-sc-image__preview {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

.lp-cdash-sc-video {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lp-cdash-sc-video__preview {
    flex: 1 1 100%;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #a3a3a3;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 6px 8px;
    word-break: break-all;
}

.lp-cdash-sc-video__quality-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #a3a3a3;
}

.lp-cdash-sc-video__quality {
    padding: 4px 6px;
    font-size: 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    color-scheme: dark;
}

.lp-cdash-sc-video__quality:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Unified home-background picker (single asset, video OR image). */
.lp-cdash-sc-bg {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lp-cdash-sc-bg__preview {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
}

.lp-cdash-sc-bg__filename {
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #a3a3a3;
    word-break: break-all;
    max-width: 320px;
}

.lp-cdash-sc-bg__quality-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #a3a3a3;
}

.lp-cdash-sc-bg__quality-label[hidden] {
    display: none;
}

.lp-cdash-sc-bg__quality {
    padding: 4px 6px;
    font-size: 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    color-scheme: dark;
}

.lp-cdash-sc-bg__quality:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lp-cdash-sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

/* Override Elementor / Hello baseline button rules — scoped + all:unset rebuild. */
.lp-creator__section .lp-cdash-sc-btn,
.lp-cdash-site-controls button.lp-cdash-sc-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: #e5e5e5;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-creator__section .lp-cdash-sc-btn:hover,
.lp-cdash-site-controls button.lp-cdash-sc-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.32);
    color: #fff;
}
.lp-creator__section .lp-cdash-sc-btn--publish,
.lp-cdash-site-controls button.lp-cdash-sc-btn--publish {
    background: #fff;
    color: #0a0a0a;
    border-color: #fff;
}
.lp-creator__section .lp-cdash-sc-btn--publish:hover,
.lp-cdash-site-controls button.lp-cdash-sc-btn--publish:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #0a0a0a;
}

.lp-cdash-sc-status {
    font-size: 0.8rem;
    color: #86efac;
}
.lp-cdash-sc-status--err { color: #fca5a5; }

.lp-cdash-sc-history { margin-top: 8px; }
.lp-cdash-sc-history summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: #a3a3a3;
    padding: 2px 0;
}
.lp-cdash-sc-history summary:hover { color: #fff; }
.lp-cdash-sc-history__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}
.lp-cdash-sc-history__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.12);
    font-size: 0.8rem;
    color: #a3a3a3;
}
.lp-cdash-sc-history__row:last-child { border-bottom: 0; }
.lp-cdash-sc-history__title { font-weight: 500; color: #fff; }
.lp-cdash-sc-history__empty { color: #6b6b6b; font-style: italic; font-size: 0.85rem; }

/* Dual-iframe preview modal — fixed full-viewport overlay. */
.lp-cdash-sc-preview {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-cdash-sc-preview[hidden] { display: none; }
.lp-cdash-sc-preview__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.lp-cdash-sc-preview__modal {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}
.lp-cdash-sc-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.lp-cdash-sc-preview__viewports {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.lp-cdash-sc-preview__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.lp-cdash-sc-preview__label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lp-cdash-sc-preview__iframe {
    border: 1px solid #ddd;
    background: #fff;
}
.lp-cdash-sc-preview__iframe--desktop {
    width: 1440px;
    height: 900px;
    transform: scale(0.42);
    transform-origin: top left;
    display: block;
    margin-bottom: -522px; /* compensate scaled height visually */
    margin-right: -835px;  /* compensate scaled width visually */
}
.lp-cdash-sc-preview__iframe--mobile {
    width: 375px;
    height: 812px;
    transform: scale(0.55);
    transform-origin: top left;
    display: block;
    margin-bottom: -365px;
    margin-right: -169px;
}

/* Tier name inline-rename row + mobile-top dropdown. */
.lp-cdash-tier__name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
}
.lp-cdash-tier__name-input {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 4px;
    color: #fff;
    flex: 1 1 auto;
    min-width: 0;
}
.lp-cdash-tier__name-actions {
    display: inline-flex;
    gap: 4px;
}
.lp-cdash-tier .lp-cdash-tier__name-btn,
button.lp-cdash-tier__name-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.8rem;
    color: #e5e5e5;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lp-cdash-tier .lp-cdash-tier__name-btn:hover,
button.lp-cdash-tier__name-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.16);
    color: #fff;
}
.lp-cdash-tier .lp-cdash-tier__name-btn--save,
button.lp-cdash-tier__name-btn--save {
    background: #fff;
    color: #0a0a0a;
    border-color: #fff;
}
.lp-cdash-tier .lp-cdash-tier__name-btn--save:hover,
button.lp-cdash-tier__name-btn--save:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #0a0a0a;
}

.lp-cdash-tiers__settings {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 8px 0 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.lp-cdash-tiers__mobile-top-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.lp-cdash-tiers__mobile-top-select {
    font: inherit;
    font-size: 0.9rem;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #e5e5e5;
    color-scheme: dark;
    min-width: 220px;
}
.lp-cdash-tiers__mobile-top-status {
    font-size: 0.8rem;
    color: #86efac;
}

@media (max-width: 768px) {
    .lp-cdash-site-controls {
        grid-template-columns: 1fr;
    }
    .lp-cdash-sc-preview__iframe--desktop {
        transform: scale(0.22);
        margin-bottom: -700px;
        margin-right: -1125px;
    }
    .lp-cdash-sc-preview__iframe--mobile {
        transform: scale(0.45);
        margin-bottom: -447px;
        margin-right: -206px;
    }
}

/* =============================================================================
 * SHIPPING SUB-TAB — /creator/#shipping
 *
 * Phase 1 of physical-fulfillment-and-address-opt-out. Admin-only surface
 * inside /creator/. Mirrors the existing .lp-cdash-site-controls visual
 * language (heading + subhead + grouped pickers + table).
 * ============================================================================= */
.lp-cdash-shipping {
    max-width: 920px;
}
.lp-cdash-shipping__heading {
    font-family: 'Onest', sans-serif;
    font-size: 1.1rem;
    margin: 0 0 4px;
}
.lp-cdash-shipping__sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 18px;
}
.lp-cdash-shipping__pickers {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}
.lp-cdash-shipping__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}
.lp-cdash-shipping__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Onest', sans-serif;
}
.lp-cdash-shipping__cycle-group {
    display: flex;
    gap: 8px;
}
.lp-cdash-shipping__cycle-group select {
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: 'Onest', sans-serif;
    font-size: 0.85rem;
}
.lp-cdash-shipping__tiers {
    border: none;
    padding: 0;
    margin: 0;
    flex: 1 1 320px;
}
.lp-cdash-shipping__tiers legend {
    padding: 0 0 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Onest', sans-serif;
}
.lp-cdash-shipping__tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    font-size: 0.85rem;
    cursor: pointer;
}
.lp-cdash-shipping__cutoff {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.lp-cdash-shipping__cutoff-display {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
}
.lp-cdash-shipping__cutoff-pt {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
}
.lp-cdash-shipping .lp-cdash-shipping__cutoff-edit,
.lp-cdash-shipping .lp-cdash-shipping__cutoff-save,
.lp-cdash-shipping .lp-cdash-shipping__cutoff-cancel,
.lp-cdash-shipping .lp-cdash-shipping__export,
.lp-cdash-shipping .lp-cdash-shipping__rerun {
    all: unset;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.lp-cdash-shipping .lp-cdash-shipping__cutoff-edit:hover,
.lp-cdash-shipping .lp-cdash-shipping__cutoff-save:hover,
.lp-cdash-shipping .lp-cdash-shipping__cutoff-cancel:hover,
.lp-cdash-shipping .lp-cdash-shipping__export:hover,
.lp-cdash-shipping .lp-cdash-shipping__rerun:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.28);
}
.lp-cdash-shipping .lp-cdash-shipping__export {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.lp-cdash-shipping .lp-cdash-shipping__export:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
}
.lp-cdash-shipping__cutoff-drawer {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.lp-cdash-shipping__cutoff-input {
    width: 70px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.85rem;
}
.lp-cdash-shipping__cutoff-help {
    width: 100%;
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}
.lp-cdash-shipping__breakdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.lp-cdash-shipping__bucket {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}
.lp-cdash-shipping__bucket-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Onest', sans-serif;
}
.lp-cdash-shipping__bucket-count {
    font-size: 1.4rem;
    font-family: 'Onest', sans-serif;
}
.lp-cdash-shipping__bucket--final {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.20);
}
.lp-cdash-shipping__preview {
    margin-bottom: 16px;
}
.lp-cdash-shipping__preview > summary {
    cursor: pointer;
    font-size: 0.85rem;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.78);
}
.lp-cdash-shipping__preview-table,
.lp-cdash-shipping__history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.lp-cdash-shipping__preview-table th,
.lp-cdash-shipping__history-table th {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-cdash-shipping__preview-table td,
.lp-cdash-shipping__history-table td {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lp-cdash-shipping__actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}
.lp-cdash-shipping__status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}
.lp-cdash-shipping__history-heading {
    font-family: 'Onest', sans-serif;
    font-size: 0.95rem;
    margin: 0 0 8px;
}

@media (max-width: 720px) {
    .lp-cdash-shipping__breakdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lp-cdash-shipping__pickers {
        gap: 14px;
    }
}

/* ============================================================
   AUDIENCE — RM TAB (creator-audience-v1)
   Greenfield namespace `.lp-audience*`. Dark surface inherits
   `body.lp-theme-dark` from /creator/.
   ============================================================ */

.lp-audience {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    color: inherit;
}

/* membership-source-reconcile §2.6 — Audience header bar. Subtabs on the
 * left, staleness chip + refresh button on the right. Border lives on
 * the subtabs row so the actions float visually attached. */
.lp-audience__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-wrap: wrap;
}

.lp-audience__header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
}

.lp-audience__subtabs {
    display: flex;
    gap: 6px;
    padding-bottom: 0;
}

/* Bottom-border subtabs — mirror .lp-creator-media .lp-mediatab. Enumerate all
 * five pseudo-states + bump container specificity per CLAUDE.md "Button / link
 * specificity vs theme + Elementor defaults" rule (Hello Elementor's button
 * accent + a:hover/a:visited rules win against (0,1,0) without enumeration). */
.lp-audience .lp-audience__subtab,
.lp-audience .lp-audience__subtab:hover,
.lp-audience .lp-audience__subtab:focus,
.lp-audience .lp-audience__subtab:active,
.lp-audience .lp-audience__subtab:visited {
    all: unset;
    box-sizing: border-box;
    padding: 10px 14px;
    color: #a3a3a3;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.lp-audience .lp-audience__subtab.is-active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}
.lp-audience .lp-audience__subtab:hover {
    color: #fff;
}

.lp-audience__panel {
    display: none;
}

.lp-audience__panel.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-height: 60vh;
}

.lp-audience__panel--cancel-surveys.is-active {
    grid-template-columns: minmax(0, 1fr);
}

/* Search bar — full-width, sits between the audience header and the chip
 * row. Replaces the v1 left rail (killed in this commit). */
.lp-audience__searchbar {
    padding: 12px 16px 0;
}
.lp-audience__searchbar .lp-audience__search {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: inherit;
}
body:not(.lp-theme-dark) .lp-audience__searchbar .lp-audience__search {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.04);
}

.lp-audience__search {
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 14px;
}

.lp-audience__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-audience .lp-audience__pill,
.lp-audience .lp-audience__pill[type="button"] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    user-select: none;
}

.lp-audience .lp-audience__pill.is-active,
.lp-audience .lp-audience__pill[aria-pressed="true"],
.lp-audience .lp-audience__pill[aria-checked="true"] {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.lp-audience .lp-audience__pill:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.lp-audience__center {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lp-audience__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lp-audience__count {
    font-size: 13px;
    opacity: 0.7;
}

.lp-audience__toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* audience-card-last4 — privacy note visible only when card_last4 column is
   active (JS toggles `hidden`). Inline with the export button so it reads as
   a label for it; muted to not steal attention. */
.lp-audience__csv-privacy {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.7;
    margin-right: 4px;
}
.lp-audience__csv-privacy[hidden] {
    display: none !important;
}

.lp-audience .lp-audience__btn,
.lp-audience .lp-audience__btn[type="button"] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    line-height: 1.4;
}

.lp-audience .lp-audience__btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.lp-audience .lp-audience__linkbtn {
    all: unset;
    cursor: pointer;
    color: inherit;
    text-decoration: underline;
    font-size: 12px;
    opacity: 0.7;
}

.lp-audience__loading {
    padding: 24px 0;
    opacity: 0.6;
    font-style: italic;
}

.lp-audience__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.lp-audience__row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.2fr) 56px 70px 80px;
    gap: 10px;
    padding: 10px 14px;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    transition: background 120ms ease;
}

.lp-audience__row:last-child {
    border-bottom: 0;
}

.lp-audience__row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lp-audience__row.is-selected {
    background: rgba(255, 255, 255, 0.08);
}

.lp-audience__row-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-audience__row-email {
    opacity: 0.65;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-audience__row-tier {
    font-size: 12px;
    opacity: 0.85;
}

.lp-audience__row-phase {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.lp-audience__row-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.lp-audience__row-ltv {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 13px;
}

.lp-audience__pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
}

.lp-audience__detail {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 16px;
    color: inherit;
}

.lp-audience__detail[hidden] {
    display: none;
}

.lp-audience .lp-audience__detail-close {
    all: unset;
    cursor: pointer;
    float: right;
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
    padding: 4px 8px;
}

.lp-audience-detail__header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.lp-audience-detail__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.lp-audience-detail__id {
    flex: 1 1 auto;
    min-width: 0;
}

.lp-audience-detail__name {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

.lp-audience-detail__email,
.lp-audience-detail__tier,
.lp-audience-detail__meta {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.85;
}

.lp-audience-detail__meta {
    font-size: 12px;
    opacity: 0.7;
}

.lp-audience-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: 6px;
    font-weight: 600;
    background: rgba(255, 200, 80, 0.18);
    color: rgb(255, 220, 130);
    border: 1px solid rgba(255, 200, 80, 0.3);
}

.lp-audience-chip-multisub {
    background: rgba(255, 90, 90, 0.18);
    color: rgb(255, 180, 180);
    border-color: rgba(255, 90, 90, 0.3);
}

/* membership-source-reconcile §2.4 — dual-source chip on detail header */
.lp-audience-chip-dualsource {
    background: rgba(168, 85, 247, 0.18);
    color: rgb(216, 180, 254);
    border-color: rgba(168, 85, 247, 0.35);
}

/* membership-source-reconcile §2.5 — Patreon detail sub-tab */
.lp-audience-detail__patreon {
    margin: 0;
}

.lp-audience-detail__patreon-empty {
    padding: 12px 4px;
    opacity: 0.75;
    font-size: 13px;
}

.lp-audience-detail__patreon-empty p {
    margin: 0 0 8px;
}

.lp-audience-detail__patreon-hint {
    font-size: 12px;
    opacity: 0.7;
}

.lp-audience-detail__patreon-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.15);
}

.lp-audience-detail__patreon-status--active   { background: rgba(34,197,94,0.18);  color: #86efac; border-color: rgba(34,197,94,0.35); }
.lp-audience-detail__patreon-status--declined { background: rgba(234,179,8,0.18);  color: #fde68a; border-color: rgba(234,179,8,0.35); }
.lp-audience-detail__patreon-status--former   { background: rgba(255,255,255,0.06); color: #a3a3a3; border-color: rgba(255,255,255,0.15); }
.lp-audience-detail__patreon-status--unknown  { background: rgba(255,255,255,0.04); color: #6b7280; border-color: rgba(255,255,255,0.10); }

/* membership-source-reconcile §3.4 — Cancel-survey source pill row + row chips */
.lp-audience__cs-source-pills {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.lp-audience-chip-source-lp {
    background: rgba(59, 130, 246, 0.18);
    color: rgb(147, 197, 253);
    border-color: rgba(59, 130, 246, 0.35);
}

.lp-audience-chip-source-patreon {
    background: rgba(234, 88, 12, 0.18);
    color: rgb(254, 215, 170);
    border-color: rgba(234, 88, 12, 0.35);
}



.lp-audience-detail__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
}

.lp-audience .lp-audience-detail__tab {
    all: unset;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 12px;
    color: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    opacity: 0.7;
}

.lp-audience .lp-audience-detail__tab.is-active {
    opacity: 1;
    border-bottom-color: currentColor;
    font-weight: 600;
}

.lp-audience-detail__pane {
    font-size: 13px;
}

.lp-audience-detail__pane[hidden] {
    display: none;
}

.lp-audience-detail__dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    margin: 0;
}

.lp-audience-detail__dl dt {
    opacity: 0.6;
    font-size: 12px;
}

.lp-audience-detail__dl dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.lp-audience-detail__txns {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.lp-audience-detail__txns th,
.lp-audience-detail__txns td {
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.lp-audience-detail__txns th {
    opacity: 0.7;
    font-weight: 600;
}

.lp-audience-detail__notes-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.lp-audience-detail__notes-input {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}

.lp-audience-detail__notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-audience-detail__note {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
}

.lp-audience-detail__note-meta {
    font-size: 11px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.lp-audience-detail__note-body {
    font-size: 13px;
    line-height: 1.4;
}

.lp-audience-detail__history,
.lp-audience-detail__surveys {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-audience-detail__surveys li {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
}

.lp-audience-detail__survey-meta {
    margin: 4px 0;
    font-size: 11px;
    opacity: 0.7;
}

.lp-audience-detail__surveys blockquote {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    font-style: italic;
    opacity: 0.85;
    font-size: 12px;
}

.lp-audience-detail__address dl {
    margin: 0;
}

/* creator-audience-address-edit — admin inline edit overlay on Address tab. */
.lp-audience-detail__address-wrap {
    position: relative;
}
.lp-audience-detail__address-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}
.lp-audience-detail__address-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
}
.lp-audience-detail__address-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    opacity: 0.85;
}
.lp-audience-detail__address-form input[type="text"] {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit;
}
.lp-audience-detail__address-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 8px;
}
.lp-audience-detail__address-form .lp-audience-detail__address-optout {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 1;
}
.lp-audience-detail__address-warning {
    margin: 0;
    font-size: 12px;
    opacity: 0.7;
    font-style: italic;
}
.lp-audience-detail__address-error {
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(220, 60, 60, 0.18);
    color: #ffb4b4;
    font-size: 12px;
}
.lp-audience-detail__address-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Cancel Surveys cdash sub-tab */

.lp-audience__cs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.lp-audience__cs-toolbar select,
.lp-audience__cs-toolbar input[type="date"] {
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    margin-left: 4px;
}

.lp-audience__cs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-audience__cs-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1.4fr) 160px minmax(0, 2fr) 90px;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 13px;
}

.lp-audience__cs-row time {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

/* Cancel-survey reason modal step 1 (member-facing /members/#account flow) */

.lp-cancel-modal {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lp-cancel-modal__intro {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.4;
    margin: 0;
}

.lp-cancel-modal__reasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-cancel-modal__reasons li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.lp-cancel-modal__reasons input[type="radio"] {
    margin-top: 4px;
    flex: 0 0 auto;
}

.lp-cancel-modal__reasons label {
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    flex: 1 1 auto;
}

.lp-cancel-modal__freeform {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.lp-cancel-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Cancel confirm step — center content vertically + horizontally so the
   short two-line panel doesn't leave the buttons jammed at the top (QA #4). */
.lp-cancel-modal[data-cancel-step="2"] {
    justify-content: center;
    min-height: 200px;
    text-align: center;
}
.lp-cancel-modal[data-cancel-step="2"] .lp-cancel-modal__actions {
    justify-content: center;
    margin-top: 8px;
}

.lp-cancel-modal .lp-cancel-modal__btn,
.lp-cancel-modal .lp-cancel-modal__btn[type="button"] {
    all: unset;
    cursor: pointer;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-cancel-modal .lp-cancel-modal__btn--primary {
    background: #fff;
    color: #111;
    border-color: #fff;
    font-weight: 600;
}

@media (max-width: 980px) {
    .lp-audience__panel.is-active {
        grid-template-columns: 1fr;
    }
    .lp-audience__detail {
        position: static;
        max-height: none;
    }
}

/* Light-surface fallbacks (creator surface inherits dark, but defensive). */

body:not(.lp-theme-dark) .lp-audience__detail,
body:not(.lp-theme-dark) .lp-audience__row.is-selected,
body:not(.lp-theme-dark) .lp-audience__cs-row,
body:not(.lp-theme-dark) .lp-audience-detail__note,
body:not(.lp-theme-dark) .lp-audience-detail__surveys li {
    background: rgba(0, 0, 0, 0.04);
}

body:not(.lp-theme-dark) .lp-audience__list,
body:not(.lp-theme-dark) .lp-audience__row,
body:not(.lp-theme-dark) .lp-audience__subtabs,
body:not(.lp-theme-dark) .lp-audience-detail__header,
body:not(.lp-theme-dark) .lp-audience-detail__tabs {
    border-color: rgba(0, 0, 0, 0.1);
}

body:not(.lp-theme-dark) .lp-audience .lp-audience__pill {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

body:not(.lp-theme-dark) .lp-audience .lp-audience__pill.is-active,
body:not(.lp-theme-dark) .lp-audience .lp-audience__pill[aria-pressed="true"],
body:not(.lp-theme-dark) .lp-audience .lp-audience__pill[aria-checked="true"] {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* ──────────────────────────────────────────────────────────────────
 * AUDIENCE TOP CHIPS (audience-v2 Phase 1.3 / E1)
 * Top filter chip row replaces the v1 left-rail Status mutex group.
 * Phase 2 wires the [Filters ▾] chip to the expanded modal.
 * ────────────────────────────────────────────────────────────────── */
.lp-audience__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 12px 16px 8px;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
}

body.lp-theme-dark .lp-audience__chips {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.lp-audience .lp-audience__chip,
.lp-audience .lp-audience__chip[type="button"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #222;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

body.lp-theme-dark .lp-audience .lp-audience__chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f2f2f2;
}

.lp-audience .lp-audience__chip:hover {
    border-color: #888;
}

.lp-audience .lp-audience__chip[aria-pressed="true"],
.lp-audience .lp-audience__chip.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
}

body.lp-theme-dark .lp-audience .lp-audience__chip[aria-pressed="true"],
body.lp-theme-dark .lp-audience .lp-audience__chip.is-active {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.lp-audience .lp-audience__chip--filters {
    margin-left: auto; /* push Filters + Clear to the right edge */
}

.lp-audience .lp-audience__chip--clear {
    border-color: transparent;
    background: transparent;
    color: #555;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lp-audience .lp-audience__chip--clear:hover {
    color: #111;
    background: rgba(0, 0, 0, 0.04);
}
body.lp-theme-dark .lp-audience .lp-audience__chip--clear {
    color: #cfcfcf;
}
body.lp-theme-dark .lp-audience .lp-audience__chip--clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

/* Mobile — chip row scrolls horizontally; keep Filters/Clear on the right edge */
@media (max-width: 768px) {
    .lp-audience__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    .lp-audience .lp-audience__chip--filters {
        margin-left: 0;
    }
}

/* ──────────────────────────────────────────────────────────────────
 * AUDIENCE — audience-cohort-redesign tier sub-row
 * Always-visible additive multi-select tier pill row under the cohort
 * chip row. Hidden when cohort=free (free has no tier). Replaces the
 * chip-expand-on-click sub-row machinery (4.58.2) wholesale.
 * ────────────────────────────────────────────────────────────────── */
.lp-audience__tier-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 6px;
    margin: 4px 0 8px;
}
.lp-audience__tier-row[hidden] {
    display: none;
}
.lp-audience__tier-row-label {
    font-size: 12px;
    color: #777;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lp-audience .lp-audience__tier-pill,
.lp-audience .lp-audience__tier-pill[type="button"] {
    all: unset;
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.lp-audience .lp-audience__tier-pill:hover {
    background: rgba(0, 0, 0, 0.04);
}
.lp-audience .lp-audience__tier-pill[aria-pressed="true"],
.lp-audience .lp-audience__tier-pill.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
}
body.lp-theme-dark .lp-audience__tier-row {
    background: rgba(255, 255, 255, 0.04);
}
body.lp-theme-dark .lp-audience__tier-row-label {
    color: #999;
}
body.lp-theme-dark .lp-audience .lp-audience__tier-pill {
    color: #cfcfcf;
    border-color: rgba(255, 255, 255, 0.18);
}
body.lp-theme-dark .lp-audience .lp-audience__tier-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
body.lp-theme-dark .lp-audience .lp-audience__tier-pill[aria-pressed="true"],
body.lp-theme-dark .lp-audience .lp-audience__tier-pill.is-active {
    background: #fff;
    color: #111;
    border-color: #fff;
}
/* Chip row wraps to two lines on narrower desktop viewports — 8 cohorts +
 * Filters/Clear/Cols won't fit single-row at 1280px. Mobile keeps the
 * existing horizontal-scroll behavior set above. */
@media (min-width: 769px) and (max-width: 1280px) {
    .lp-audience__chips {
        flex-wrap: wrap;
    }
}

/* ──────────────────────────────────────────────────────────────────
 * AUDIENCE COLUMN CHOOSER MODAL (audience-v2 Phase 1.5)
 * Toggles each entry in lp_audience_all_columns(). Persists per-operator
 * via lp_dashboard_audience_columns_save AJAX (Iris's v1 endpoint).
 * Default-OFF subset includes Migration State (operator opt-in per E2).
 * ────────────────────────────────────────────────────────────────── */
.lp-audience__cols-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-audience__cols-modal[hidden] { display: none; }

.lp-audience__cols-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.lp-audience__cols-modal-card {
    position: relative;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 24px;
    width: min(480px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
}

body.lp-theme-dark .lp-audience__cols-modal-card {
    background: #1a1a1a;
    color: #f2f2f2;
}

.lp-audience__cols-modal-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
}

.lp-audience__cols-modal-hint {
    margin: 0 0 16px;
    font-size: 13px;
    color: #666;
}
body.lp-theme-dark .lp-audience__cols-modal-hint { color: #b0b0b0; }

.lp-audience__cols-modal-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-bottom: 20px;
}
@media (max-width: 520px) {
    .lp-audience__cols-modal-list { grid-template-columns: 1fr; }
}

.lp-audience__cols-modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 2px;
    font-size: 13px;
}
.lp-audience__cols-modal-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.lp-audience__cols-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.lp-audience .lp-audience__btn--primary,
.lp-audience .lp-audience__btn--primary[type="button"] {
    background: #111;
    color: #fff;
    border-color: #111;
}
.lp-audience .lp-audience__btn--primary:hover {
    background: #000;
}
body.lp-theme-dark .lp-audience .lp-audience__btn--primary,
body.lp-theme-dark .lp-audience .lp-audience__btn--primary[type="button"] {
    background: #fff;
    color: #111;
    border-color: #fff;
}

/* ──────────────────────────────────────────────────────────────────
 * AUDIENCE V2 PHASE 2 — column-aware row grid + slide-in detail panel
 * + expanded filter modal + mass-message drawer + confirmation modal.
 *
 * Per CLAUDE.md "CSS editing workflow": existing rules audited at
 *   .lp-audience__row (line 14772, 6-col grid) → overridden below
 *   .lp-audience__detail (line 14844, position: sticky) → overridden below
 *   .lp-audience__detail-close (line 14859, all:unset float:right) — kept
 *   .lp-audience__row.is-selected (line 14792) — kept; new bg below
 * The `--lp-audience-col-count` custom property is set by the JS
 * renderRows so the grid column count tracks the active column subset.
 * ────────────────────────────────────────────────────────────────── */

/* ── Row grid (column-count aware; checkbox + dynamic columns) ── */
.lp-audience .lp-audience__row {
    grid-template-columns:
        28px repeat(var(--lp-audience-col-count, 6), minmax(0, 1fr));
}

.lp-audience .lp-audience__row--head {
    cursor: default;
    background: rgba(255, 255, 255, 0.03);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    font-weight: 600;
}
.lp-audience .lp-audience__row--head:hover { background: rgba(255, 255, 255, 0.03); }

body:not(.lp-theme-dark) .lp-audience .lp-audience__row--head {
    background: rgba(0, 0, 0, 0.03);
}
body:not(.lp-theme-dark) .lp-audience .lp-audience__row--head:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* audience-recovery — sortable column header affordance. Caret + hover. */
.lp-audience__row-cell--sortable {
    cursor: pointer;
    user-select: none;
}
.lp-audience__row-cell--sortable:hover { opacity: 1; }
.lp-audience__row-cell--sortable.is-sorted { opacity: 1; }
.lp-audience__sort-caret {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.6;
    vertical-align: middle;
}
.lp-audience__row-cell--sortable.is-sorted .lp-audience__sort-caret { opacity: 1; }

.lp-audience__row-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
}
.lp-audience__row-cell--name {
    font-weight: 500;
}
.lp-audience__row-cell--email,
.lp-audience__row-cell--migration_state,
.lp-audience__row-cell--source {
    opacity: 0.75;
    font-size: 12px;
}
.lp-audience__row-cell--ltv,
.lp-audience__row-cell--pledge {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.lp-audience__row-cell--joined,
.lp-audience__row-cell--last_charge,
.lp-audience__row-cell--next_charge,
.lp-audience__row-cell--cancel_date,
.lp-audience__row-cell--access_expiration {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    opacity: 0.8;
}

.lp-audience__row-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-audience__row-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

/* ── Slide-in detail panel (Phase 2.1) — overrides v1 sticky pane ── */
.lp-audience .lp-audience__detail {
    position: fixed;
    top: 56px;            /* below .lp-header (56px) */
    right: 0;
    bottom: 0;
    left: auto;
    max-height: none;
    width: min(560px, 90vw);
    background: #1a1a1a;
    color: #fff;
    z-index: 10000;       /* above .lp-header (9999) */
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    padding: 18px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lp-audience .lp-audience__detail.is-open {
    transform: translateX(0);
}
body:not(.lp-theme-dark) .lp-audience .lp-audience__detail {
    background: #fff;
    color: #111;
}

.lp-audience__detail-backdrop {
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;        /* below the panel; above page chrome */
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}
.lp-audience__detail-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.lp-audience__detail-backdrop[hidden] {
    display: none;
}

/* The 980px-and-below override at the top of this CSS file resets
 * .lp-audience__detail to position:static, max-height:none — that
 * conflicts with the new fixed overlay. Restore fixed layout on
 * mobile too, but full-width since 90vw is fine. */
@media (max-width: 980px) {
    .lp-audience .lp-audience__detail {
        position: fixed;
        top: 56px;
        max-height: none;
        width: 100vw;
        max-width: none;
    }
    .lp-audience__detail-backdrop {
        inset: 56px 0 0 0;
    }
}

/* ── Expanded filter modal (Phase 2.2) ── */
.lp-audience__filter-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;       /* above slide-in panel */
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-audience__filter-modal[hidden] { display: none; }

.lp-audience__filter-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.lp-audience__filter-modal-card {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: 10px;
    padding: 20px 22px 16px;
    width: min(720px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
body.lp-theme-dark .lp-audience__filter-modal-card {
    background: #1a1a1a;
    color: #fff;
}

.lp-audience__filter-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.lp-audience__filter-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.lp-audience .lp-audience__filter-modal-close {
    all: unset;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
    padding: 4px 8px;
}

.lp-audience__filter-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-right: 4px;
    margin-right: -4px;
}

.lp-audience__filter-group {
    border: 0;
    padding: 0;
    margin: 0 0 14px 0;
}
.lp-audience__filter-group legend {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    font-weight: 600;
    padding: 0;
    margin: 0 0 6px 0;
}

.lp-audience__filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-audience__filter-range {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
}
.lp-audience__filter-range label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    opacity: 0.85;
}
.lp-audience .lp-audience__filter-range input {
    font: inherit;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
    color: inherit;
    min-width: 0;
}
body.lp-theme-dark .lp-audience .lp-audience__filter-range input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.lp-audience__filter-hint {
    font-size: 11px;
    opacity: 0.6;
    margin: 6px 0 0;
}

.lp-audience__filter-pill-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    line-height: 1.2;
}
body:not(.lp-theme-dark) .lp-audience__filter-pill-count {
    background: rgba(0, 0, 0, 0.08);
}

.lp-audience__filter-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 12px;
}
body.lp-theme-dark .lp-audience__filter-modal-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.lp-audience__filter-spacer { flex: 1 1 auto; }

.lp-audience .lp-audience__btn--ghost,
.lp-audience .lp-audience__btn--ghost[type="button"] {
    background: transparent;
    color: inherit;
    border-color: transparent;
    text-decoration: underline;
    opacity: 0.75;
}
.lp-audience .lp-audience__btn--ghost:hover {
    opacity: 1;
    background: transparent;
}

/* ── Mass-message inline drawer (Phase 2.3) ── */
.lp-audience__msg-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;       /* above filter modal — drawer can be opened from a list filter ctx */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}
.lp-audience__msg-drawer[hidden] { display: none; }

.lp-audience__msg-drawer-card {
    pointer-events: auto;
    background: #fff;
    color: #111;
    width: min(720px, 96vw);
    max-height: 70vh;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(105%);
    transition: transform 0.25s ease-out;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 14px;
}
.lp-audience__msg-drawer.is-open .lp-audience__msg-drawer-card {
    transform: translateY(0);
}
body.lp-theme-dark .lp-audience__msg-drawer-card {
    background: #1a1a1a;
    color: #fff;
}

.lp-audience__msg-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
body.lp-theme-dark .lp-audience__msg-drawer-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.lp-audience__msg-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.lp-audience__msg-drawer-recipients {
    flex: 1 1 auto;
    font-size: 12px;
    opacity: 0.8;
    text-align: right;
}

.lp-audience .lp-audience__msg-drawer-close {
    all: unset;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    opacity: 0.7;
    padding: 0 4px;
}

.lp-audience__msg-drawer-body {
    overflow-y: auto;
    padding-right: 4px;
}

.lp-audience__msg-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.lp-audience__msg-drawer-field span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    font-weight: 600;
}
.lp-audience .lp-audience__msg-drawer-subject,
.lp-audience .lp-audience__msg-drawer-body-input {
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
    color: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}
body.lp-theme-dark .lp-audience .lp-audience__msg-drawer-subject,
body.lp-theme-dark .lp-audience .lp-audience__msg-drawer-body-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.lp-audience__msg-drawer-hint {
    font-size: 11px;
    opacity: 0.6;
    margin: 0 0 8px;
}

.lp-audience__msg-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 10px;
}
body.lp-theme-dark .lp-audience__msg-drawer-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Confirmation modal (Phase 2.3 — fires at recipient_count >= 10) ── */
.lp-audience__confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-audience__confirm-modal[hidden] { display: none; }

.lp-audience__confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.lp-audience__confirm-modal-card {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: 10px;
    padding: 18px 20px 14px;
    width: min(440px, 92vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
body.lp-theme-dark .lp-audience__confirm-modal-card {
    background: #1a1a1a;
    color: #fff;
}

.lp-audience__confirm-modal-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
}

.lp-audience__confirm-modal-body {
    margin: 0 0 14px 0;
    font-size: 13px;
    opacity: 0.85;
    line-height: 1.5;
}

.lp-audience__confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Mobile compactor for filter modal + msg drawer ── */
@media (max-width: 600px) {
    .lp-audience__filter-modal-card {
        width: 96vw;
        padding: 16px 14px 12px;
    }
    .lp-audience__msg-drawer-card {
        width: 100vw;
        max-height: 80vh;
        border-radius: 12px 12px 0 0;
    }
    .lp-audience .lp-audience__row {
        grid-template-columns:
            24px repeat(var(--lp-audience-col-count, 6), minmax(0, 1fr));
        gap: 6px;
        padding: 8px 10px;
    }
}

/* ==========================================================================
   MEMBERS BACKGROUND — site-controls picker UI + render-side bg layer
   Per Ari probe v2 — color/image/video bg + scrim + content overlay.
   Picker scoped to .lp-cdash-mbg (Site Controls card).
   Render rendered into <body> on /yamato/members/ only via wp_body_open.
   ========================================================================== */

/* ── Render-side: bg video / mobile-fallback / scrim layers ──────────────── */
.lp-members-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
.lp-members-bg--mobile-img {
    display: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.lp-members-bg-scrim {
    /* Position + bg are emitted inline by lp_members_bg_print_styles when
       opacity > 0. This base rule just guarantees the element exists in the
       layout cleanly when no inline override is emitted. */
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
/* Lift content above the bg + scrim layers. body.lp-theme-dark wraps all
   content; the fixed-position chrome (lp-header, takeovers) already sets
   higher z-index (9999/10000+) so they aren't affected. */
body.lp-theme-dark.page-id-0:not(*) {} /* noop guard */
body.lp-theme-dark > .elementor,
body.lp-theme-dark > .elementor-location-archive,
body.lp-theme-dark .site-content,
body.lp-theme-dark #content,
body.lp-theme-dark .lp-members-feed {
    position: relative;
    z-index: 2;
}

/* ── Picker UI: .lp-cdash-mbg ──────────────────────────────────────────── */
/* QA pass: section dividers softened — borders dropped, heading rule
   removed. Sibling Site Controls cards (Home banner, Home background,
   pin cards) have no internal dividers; this card now matches. */
.lp-cdash-mbg__section {
    margin-top: 12px;
}
.lp-cdash-mbg__section:first-of-type {
    margin-top: 4px;
}
.lp-cdash-mbg__sub-hint {
    font-size: 12px;
    color: #999;
    margin: 0 0 8px;
}
.lp-cdash-mbg__sub-title {
    color: #ddd;
    font-weight: 600;
}
.lp-cdash-mbg__sub-label {
    display: block;
    font-size: 12px;
    color: #ccc;
    margin: 8px 0 4px;
}
.lp-cdash-mbg__inline-note {
    font-size: 12px;
    color: #aaa;
    background: rgba(255, 200, 0, 0.06);
    border-left: 2px solid #c0a040;
    padding: 6px 10px;
    margin: 0 0 10px;
}
.lp-cdash-mbg__radio-row {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}
.lp-cdash-mbg__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ddd;
    font-size: 13px;
    cursor: pointer;
}
.lp-cdash-mbg__panel {
    margin-top: 8px;
}
.lp-cdash-mbg__panel[hidden] {
    display: none;
}
.lp-cdash-mbg__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 13px;
    margin-right: 12px;
}
.lp-cdash-mbg__color {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid #444;
    background: transparent;
    cursor: pointer;
}
.lp-cdash-mbg__color-text {
    width: 90px;
    background: #111;
    color: #eee;
    border: 1px solid #333;
    padding: 4px 6px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
.lp-cdash-mbg__bunny-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-cdash-mbg__bunny-wrap--mobile {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #2a2a2a;
}
.lp-cdash-mbg__preview {
    max-width: 120px;
    max-height: 72px;
    object-fit: cover;
    border: 1px solid #333;
    border-radius: 4px;
}
.lp-cdash-mbg__filename {
    font-size: 12px;
    color: #aaa;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.lp-cdash-mbg__quality-label {
    color: #ddd;
    font-size: 12px;
    margin-left: 6px;
}
.lp-cdash-mbg__quality {
    background: #111;
    color: #eee;
    border: 1px solid #333;
    padding: 3px 6px;
    font-size: 12px;
}
.lp-cdash-mbg__field-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}
.lp-cdash-mbg__field-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ddd;
    font-size: 13px;
}
.lp-cdash-mbg__field-row input[type="range"] {
    width: 160px;
}
.lp-cdash-mbg__field-row output {
    color: #aaa;
    font-size: 12px;
    min-width: 38px;
    font-variant-numeric: tabular-nums;
}
.lp-cdash-mbg__section[hidden] {
    display: none;
}

/* =============================================================================
 * PATREON COMPARISON (membership-source-reconcile Phase 4)
 *
 * Sub-sub-tab nav inside the Patreon cdash sub-tab + Comparison pane (4 cards).
 * Audited against existing rules: no overlap on .lp-cdash-patreon-subnav,
 * .lp-cdash-patreon-subtab, .lp-cdash-patreon-pane, .lp-cdash-card--comparison,
 * .lp-cdash-comparison-* (all net-new selectors). Existing .lp-cdash-card--full
 * width rule (~line 3044) is reused as-is for full-width comparison cards.
 * =============================================================================
 */

.lp-cdash-patreon-subnav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin: 16px 0 18px;
    padding: 0;
}
.lp-cdash-patreon-subtab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #a3a3a3;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-cdash-patreon-subtab:hover {
    color: #f5f5f5;
}
.lp-cdash-patreon-subtab.is-active {
    color: #f5f5f5;
    border-bottom-color: #fbbf24;
}

.lp-cdash-patreon-pane {
    /* Default visible state for the active pane; non-active panes have
     * `hidden` attribute which display:none's them. No override needed. */
}

/* ── Comparison grid + cards ── */
.lp-cdash-patreon-comparison__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.lp-cdash-card--comparison.lp-cdash-card--full {
    grid-column: 1 / -1;
}
.lp-cdash-card--comparison .lp-cdash-card__sub {
    color: #a3a3a3;
    font-size: 12px;
    margin: 4px 0 12px;
    line-height: 1.5;
}
.lp-cdash-card--comparison code {
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

/* ── Overlap card ── */
.lp-cdash-comparison-overlap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lp-cdash-comparison-overlap__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.lp-cdash-comparison-overlap__row--lp      { border-left: 3px solid #60a5fa; }
.lp-cdash-comparison-overlap__row--patreon { border-left: 3px solid #fbbf24; }
.lp-cdash-comparison-overlap__row--both    { border-left: 3px solid #34d399; }
.lp-cdash-comparison-overlap__row--neither { border-left: 3px solid #6b7280; }
.lp-cdash-comparison-overlap__label {
    font-size: 12px;
    color: #a3a3a3;
    margin-bottom: 4px;
}
.lp-cdash-comparison-overlap__count {
    font-size: 24px;
    font-weight: 600;
    color: #f5f5f5;
    line-height: 1;
}

/* ── Tier matrix card ── */
.lp-cdash-comparison-tier__wrap {
    overflow-x: auto;
}
.lp-cdash-comparison-tier__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}
.lp-cdash-comparison-tier__table th,
.lp-cdash-comparison-tier__table td {
    padding: 8px 10px;
    text-align: right;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.06);
}
.lp-cdash-comparison-tier__table thead th {
    background: rgba(255,255,255,0.04);
    color: #d4d4d4;
    font-weight: 600;
    text-align: center;
}
.lp-cdash-comparison-tier__table tbody th {
    text-align: left;
    color: #d4d4d4;
    font-weight: 500;
    background: rgba(255,255,255,0.02);
}
.lp-cdash-comparison-tier__cell {
    color: #f5f5f5;
}
.lp-cdash-comparison-tier__cell--zero {
    color: #525252;
}
.lp-cdash-comparison-tier__cell--candidate {
    background: rgba(251,191,36,0.10);
    color: #fde68a;
    font-weight: 600;
}

/* ── Revenue card ── */
.lp-cdash-comparison-revenue__chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 160px;
    padding: 0 4px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lp-cdash-comparison-revenue__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}
.lp-cdash-comparison-revenue__bars {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-height: 0;
}
.lp-cdash-comparison-revenue__bar {
    width: 18px;
    border-radius: 3px 3px 0 0;
    min-height: 1px;
    transition: opacity 0.15s ease;
}
.lp-cdash-comparison-revenue__bar:hover {
    opacity: 0.85;
}
.lp-cdash-comparison-revenue__bar--lp      { background: #60a5fa; }
.lp-cdash-comparison-revenue__bar--patreon { background: #fbbf24; }
.lp-cdash-comparison-revenue__month {
    font-size: 11px;
    color: #a3a3a3;
    margin-top: 6px;
    position: absolute;
    bottom: -22px;
    white-space: nowrap;
}
.lp-cdash-comparison-revenue__legend {
    margin-top: 10px;
    font-size: 12px;
    color: #a3a3a3;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lp-cdash-comparison-revenue__legend-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}
.lp-cdash-comparison-revenue__legend-key--lp      { background: #60a5fa; }
.lp-cdash-comparison-revenue__legend-key--patreon { background: #fbbf24; }

/* ── Funnel card ── */
.lp-cdash-comparison-funnel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-cdash-comparison-funnel__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr 60px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}
.lp-cdash-comparison-funnel__label {
    color: #d4d4d4;
}
.lp-cdash-comparison-funnel__bar {
    background: rgba(255,255,255,0.06);
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}
.lp-cdash-comparison-funnel__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #60a5fa 0%, #34d399 100%);
    border-radius: 7px;
    transition: width 0.3s ease;
}
.lp-cdash-comparison-funnel__count {
    text-align: right;
    color: #f5f5f5;
    font-weight: 500;
}
.lp-cdash-comparison-funnel__summary {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.20);
    border-radius: 8px;
    color: #d1fae5;
    font-size: 13px;
}
.lp-cdash-comparison-funnel__summary strong {
    font-size: 18px;
    color: #6ee7b7;
}

/* ── Comparison actions (Export CSV) ── */
.lp-cdash-patreon-comparison__actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.lp-cdash-patreon-comparison__export-status {
    color: #a3a3a3;
    font-size: 12px;
}

/* ── Mobile collapse ── */
@media (max-width: 720px) {
    .lp-cdash-patreon-comparison__grid {
        grid-template-columns: 1fr;
    }
    .lp-cdash-comparison-overlap__list {
        grid-template-columns: 1fr;
    }
    .lp-cdash-comparison-funnel__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .lp-cdash-comparison-funnel__count {
        text-align: left;
    }
}

/* =============================================================================
 * INSIGHTS tab (creator dashboard, replaces former Payouts placeholder)
 *
 * Audited: no existing rules on .lp-insights*. Reuses dark-theme palette
 * established by .lp-audience / .lp-cdash-* (rgba(255,255,255,0.X) on dark
 * #0c0c0c-ish bg). Sub-tab nav mirrors .lp-audience__subtab pattern at
 * mc:14616 (bottom-border, all:unset + 5-state enumeration to beat Hello
 * Elementor button accents per CLAUDE.md "Button / link specificity" rule).
 * ============================================================================= */

.lp-insights {
    color: inherit;
}

/* Sub-tab nav (mirror .lp-audience__subtabs) */
.lp-insights__subtabs {
    display: flex;
    gap: 6px;
    padding: 0 0 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 18px;
}
.lp-insights .lp-insights__subtab,
.lp-insights .lp-insights__subtab:hover,
.lp-insights .lp-insights__subtab:focus,
.lp-insights .lp-insights__subtab:active,
.lp-insights .lp-insights__subtab:visited {
    all: unset;
    box-sizing: border-box;
    padding: 10px 14px;
    color: #a3a3a3;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.lp-insights .lp-insights__subtab.is-active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}
.lp-insights .lp-insights__subtab:hover {
    color: #fff;
}

.lp-insights__pane { display: none; }
.lp-insights__pane.is-active { display: block; }

/* Cards */
.lp-insights__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 18px;
}
.lp-insights__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    flex-wrap: wrap;
}
.lp-insights__card-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: 0.01em;
}
.lp-insights__card-sub {
    color: #a3a3a3;
    font-weight: 400;
    font-size: 13px;
}

.lp-insights__loading,
.lp-insights__empty {
    color: #a3a3a3;
    font-size: 13px;
    padding: 8px 0;
}
.lp-insights__error {
    color: #fca5a5;
    font-size: 13px;
    padding: 8px 0;
}

/* Balance card — large numbers + deep-link buttons */
.lp-insights__balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 16px;
}
.lp-insights__balance-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-insights__balance-label {
    color: #a3a3a3;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lp-insights__balance-amount {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lp-insights__balance-amount--available {
    color: #34d399;
}
.lp-insights__balance-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Deep-link buttons — ghost outline, mirrors Refresh-Patreon ghost pattern */
.lp-insights .lp-insights__deeplink,
.lp-insights .lp-insights__deeplink:link,
.lp-insights .lp-insights__deeplink:visited,
.lp-insights .lp-insights__deeplink:hover,
.lp-insights .lp-insights__deeplink:active,
.lp-insights .lp-insights__deeplink:focus {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #f5f5f5;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
}
.lp-insights .lp-insights__deeplink:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
}

/* Refresh icon button (balance card head) */
.lp-insights .lp-insights__refresh,
.lp-insights .lp-insights__refresh:hover,
.lp-insights .lp-insights__refresh:focus,
.lp-insights .lp-insights__refresh:active {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    color: #a3a3a3;
    font-size: 16px;
    transition: background .15s, color .15s;
}
.lp-insights .lp-insights__refresh:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Export CSV button */
.lp-insights .lp-insights__export,
.lp-insights .lp-insights__export:hover,
.lp-insights .lp-insights__export:focus,
.lp-insights .lp-insights__export:active {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #d4d4d4;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
}
.lp-insights .lp-insights__export:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.32);
}

/* Tables */
.lp-insights__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lp-insights__table th,
.lp-insights__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.lp-insights__table th {
    color: #a3a3a3;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.lp-insights__table tr:last-child td {
    border-bottom: 0;
}
.lp-insights__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lp-insights__member-name {
    color: #f5f5f5;
}
.lp-insights__member-email {
    color: #8a8a8a;
    font-size: 11px;
    margin-top: 2px;
}

/* Status pills — payout statuses + tx complete */
.lp-insights__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-transform: capitalize;
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d4;
}
.lp-insights__pill--paid,
.lp-insights__pill--complete { background: rgba(52, 211, 153, 0.16); color: #34d399; }
.lp-insights__pill--pending,
.lp-insights__pill--in_transit { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.lp-insights__pill--failed,
.lp-insights__pill--canceled { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }

/* Monthly trend bar */
.lp-insights__bar {
    height: 8px;
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.4), rgba(52, 211, 153, 0.85));
    border-radius: 4px;
    min-width: 2px;
}

/* Pager */
.lp-insights__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lp-insights__pager-label {
    color: #a3a3a3;
    font-size: 12px;
}
.lp-insights .lp-insights__pager-btn,
.lp-insights .lp-insights__pager-btn:hover,
.lp-insights .lp-insights__pager-btn:focus,
.lp-insights .lp-insights__pager-btn:active,
.lp-insights .lp-insights__pager-btn:disabled {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #d4d4d4;
    font-size: 12px;
    font-weight: 500;
    transition: background .15s, border-color .15s;
}
.lp-insights .lp-insights__pager-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.lp-insights .lp-insights__pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lp-insights__footnote {
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.6;
    margin: 8px 0 0;
}
.lp-insights__footnote a {
    color: #a3a3a3;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .lp-insights__balance-grid { grid-template-columns: 1fr; }
    .lp-insights__balance-amount { font-size: 22px; }
    .lp-insights__table { font-size: 12px; }
    .lp-insights__table th,
    .lp-insights__table td { padding: 8px 8px; }
}

/* =============================================================================
 * INSIGHTS — Comparison + Phases panes (insights-expansion)
 * Audited: no existing rules on .lp-insights-comparison / .lp-insights-phases.
 * Reuses .lp-cdash-card and .lp-cdash-patreon-comparison rules already styled.
 * ============================================================================= */
.lp-insights-staleness {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.lp-insights-staleness__refresh,
.lp-insights-staleness__refresh:link,
.lp-insights-staleness__refresh:visited,
.lp-insights-staleness__refresh:hover,
.lp-insights-staleness__refresh:active,
.lp-insights-staleness__refresh:focus {
    color: #a3a3a3;
    font-size: 12px;
    text-decoration: underline;
}
.lp-insights-staleness__refresh:hover {
    color: #fff;
}

.lp-insights-comparison {
    padding: 0;
}

.lp-insights-phases {
    padding: 0;
}
.lp-insights-phases__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.lp-insights-phases__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
}
.lp-insights-phases__card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}
.lp-insights-phases__num {
    color: #a3a3a3;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lp-insights-phases__title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.lp-insights-phases__defs {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 12px;
    font-size: 12px;
    line-height: 1.5;
}
.lp-insights-phases__defs dt {
    color: #a3a3a3;
    font-weight: 500;
}
.lp-insights-phases__defs dd {
    color: #e5e5e5;
    margin: 0;
}
.lp-insights-phases__defs code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    word-break: break-word;
}

.lp-insights-phases__section {
    margin: 24px 0;
}
.lp-insights-phases__h {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 10px;
}
.lp-insights-phases__diagram {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
    color: #e5e5e5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
}
.lp-insights-phases__sources,
.lp-insights-phases__cheatsheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.lp-insights-phases__sources th,
.lp-insights-phases__sources td,
.lp-insights-phases__cheatsheet th,
.lp-insights-phases__cheatsheet td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.lp-insights-phases__sources th,
.lp-insights-phases__cheatsheet th {
    color: #a3a3a3;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.lp-insights-phases__sources code,
.lp-insights-phases__cheatsheet code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}
.lp-insights-phases__cheatsheet a,
.lp-insights-phases__cheatsheet a:link,
.lp-insights-phases__cheatsheet a:visited,
.lp-insights-phases__cheatsheet a:hover,
.lp-insights-phases__cheatsheet a:active,
.lp-insights-phases__cheatsheet a:focus {
    color: #d4af37;
    text-decoration: underline;
}
.lp-insights-phases__cheatsheet a:hover {
    color: #fff;
}

@media (max-width: 720px) {
    .lp-insights-phases__cards { grid-template-columns: 1fr; }
    .lp-insights-phases__defs { grid-template-columns: 1fr; gap: 2px 0; }
    .lp-insights-phases__defs dt { margin-top: 6px; }
}

/* =============================================================================
 * CDASH SHIPPING — Sub-tab nav + Store Orders pane (store-orders-shipping)
 * Lives inside .lp-cdash dark surface; no light-mode variant.
 * ============================================================================= */
.lp-cdash-shipping__subnav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 20px;
}
.lp-cdash-shipping .lp-cdash-shipping__subnav-btn {
    all: unset;
    padding: 8px 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-cdash-shipping .lp-cdash-shipping__subnav-btn--active,
.lp-cdash-shipping .lp-cdash-shipping__subnav-btn:hover {
    color: #fff;
    border-bottom-color: #fff;
}
.lp-cdash-shipping__pane--hidden { display: none !important; }

/* Store Orders table */
.lp-cdash-so { color: rgba(255, 255, 255, 0.85); }
.lp-cdash-so__toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.lp-cdash-so__status-filter,
.lp-cdash-so__date-from,
.lp-cdash-so__date-to {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
}
.lp-cdash-so__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.lp-cdash-so__table th,
.lp-cdash-so__table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}
.lp-cdash-so__table th {
    opacity: 0.6;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}
.lp-cdash-so__empty {
    text-align: center;
    padding: 24px 10px;
    opacity: 0.55;
}
.lp-cdash-so__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}
.lp-cdash-so__status--processing,
.lp-cdash-so__status--wc-processing { background: rgba(37, 99, 235, 0.18); color: #93c5fd; }
.lp-cdash-so__status--completed,
.lp-cdash-so__status--wc-completed  { background: rgba(22, 163, 74, 0.18); color: #86efac; }
.lp-cdash-so__status--on-hold,
.lp-cdash-so__status--wc-on-hold    { background: rgba(146, 64, 14, 0.22); color: #fcd34d; }
.lp-cdash-so__status--cancelled,
.lp-cdash-so__status--wc-cancelled,
.lp-cdash-so__status--failed,
.lp-cdash-so__status--wc-failed     { background: rgba(127, 29, 29, 0.22); color: #fca5a5; }
.lp-cdash-so__edit-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
}
.lp-cdash-so__edit-link:hover { color: #fff; text-decoration: underline; }
.lp-cdash-so__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
}
.lp-cdash-so__count {
    font-size: 12px;
    opacity: 0.6;
}
.lp-cdash-so .lp-cdash-so__btn {
    all: unset;
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-cdash-so .lp-cdash-so__btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.lp-cdash-so .lp-cdash-so__btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   Portrait-aware thumbnails (Pass 1 — Vic Option 4)
   livingproof-nav.js sets data-lp-portrait on <img> whose
   naturalHeight / naturalWidth >= 1.05. CSS shifts
   object-position 50% → 15% from top so head/face of vertically
   tall subjects isn't clipped by the cover-crop.
   Affected card surfaces:
     - members feed grid (16:9)        — .lp-feed-item__thumb
     - members feed stream (16:9)      — .lp-stream-item__thumb
     - public news grid (1:1)          — .lp-news-grid__item img
     - public news carousel            — .lp-news-carousel__card img
   Books (3:4 contain), magazine carousel (contain), home hero
   are unaffected — they don't crop.
   ============================================================ */
.lp-feed-item__thumb[data-lp-portrait],
.lp-stream-item__thumb[data-lp-portrait],
.lp-news-grid__item img[data-lp-portrait],
.lp-news-carousel__card img[data-lp-portrait] {
    object-position: 50% 15% !important;
}

/* ============================================================
   4.58.13 — Hide Elementor footer "Join Mailing List" mailing-list
   form sitewide. Per Gia's probe, container/form IDs may differ
   per viewport — include both candidates surfaced.
   The MP login-form CTA was killed in 4.58.12; without that block
   masking it, the footer Join form became the only "Join" surface
   on news posts and read as a stray CTA. Remove sitewide.
   ============================================================ */
.elementor-element-67c4e75a,
.elementor-element-49202ed0 {
    display: none !important;
}

/* ============================================================
   Mailing List sub-tab (mailing-list-confirmation)
   Renders inside .lp-audience on /creator/ (dark surface).
   Inherits .lp-audience__pill / .lp-audience__btn from audience-v1.
   ============================================================ */

.lp-audience__panel--mailing-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 13px;
}

/* Welcome email template card.
   G5 (4.59.3) shipped as <details><summary> with white #fafafa background;
   4.59.4 — flattened to <section> + adopts .lp-cdash-sc-card dark theme
   (background #171717, white-on-dark text, white-translucent borders) so
   it matches the Site Controls / Tiers pattern in the dashboard. Always
   expanded (no collapse affordance, mirroring the rest of the dashboard
   card pattern). Padding/grid layout preserved. */
.lp-audience__ml-template {
    padding: 12px 14px;
}
.lp-audience__ml-template-hint {
    margin: 0 0 12px;
    color: #a3a3a3;
    font-size: 12px;
}
.lp-audience__ml-template-hint code {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e5e5;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.lp-audience__ml-template-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.lp-audience__ml-template-field > span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-audience__ml-template-subject {
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: #0f0f0f;
    color: #fafafa;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}
.lp-audience__ml-template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 767px) {
    .lp-audience__ml-template-grid {
        grid-template-columns: 1fr;
    }
}
.lp-audience__ml-template-body {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: #0f0f0f;
    color: #fafafa;
    font: 12px / 1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    resize: vertical;
    min-height: 220px;
}
.lp-audience__ml-template-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-audience__ml-template-preview-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-audience__ml-template-preview {
    width: 100%;
    min-height: 220px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: #fff;
}
.lp-audience__ml-template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.lp-audience__ml-template-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}
.lp-audience__ml-template-status[data-kind="ok"] {
    color: #86efac;
}
.lp-audience__ml-template-status[data-kind="error"] {
    color: #fca5a5;
}

.lp-audience__ml-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.lp-audience__ml-stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lp-audience__ml-stat--pending {
    background: rgba(255, 200, 80, 0.08);
}

.lp-audience__ml-stat-num {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lp-audience__ml-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

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

.lp-audience__ml-pills {
    display: inline-flex;
    gap: 6px;
}

.lp-audience__ml-search {
    flex: 1 1 200px;
    min-width: 160px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}

.lp-audience__ml-list {
    overflow-x: auto;
}

.lp-audience__ml-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.lp-audience__ml-table th,
.lp-audience__ml-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.lp-audience__ml-table th {
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    background: rgba(255, 255, 255, 0.03);
}

.lp-audience__ml-row[data-audience-ml-row]:hover {
    background: rgba(255, 255, 255, 0.03);
}

.lp-audience__ml-cell-email {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.lp-audience__ml-cell-source {
    opacity: 0.7;
    font-size: 12px;
}

.lp-audience__ml-cell-date {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
}

.lp-audience__ml-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.08);
}

.lp-audience__ml-status--verified {
    background: rgba(80, 200, 120, 0.16);
    color: #9be8b1;
}

.lp-audience__ml-status--pending {
    background: rgba(255, 200, 80, 0.16);
    color: #ffd97a;
}

.lp-audience__ml-status--unsubscribed {
    background: rgba(180, 180, 180, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

.lp-audience__ml-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-audience__ml-actions .lp-audience__btn {
    font-size: 11px;
    padding: 3px 8px;
}

.lp-audience__ml-actions .lp-audience__btn--danger {
    color: #ff8a8a;
}

.lp-audience__ml-pager {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.7;
}

/* Mailing-list bulk-actions toolbar (mailing-list-bulk-actions spec).
   Sticky above the table; appears only when the JS selection set is
   non-empty. Layout matches the existing .lp-audience__ml-toolbar so the
   visual language stays consistent. */
.lp-audience__ml-bulk-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    flex-wrap: wrap;
}
.lp-audience__ml-bulk-toolbar[hidden] {
    display: none;
}
.lp-audience__ml-bulk-count {
    font-size: 13px;
    font-weight: 500;
    margin-right: auto;
}
.lp-audience__ml-bulk-toolbar .lp-audience__btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.lp-audience__ml-bulk-clear {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
}
.lp-audience__ml-bulk-clear:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Checkbox column on the mailing-list table. Fixed narrow width keeps the
   email column from squishing. */
.lp-audience__ml-table .lp-audience__ml-cell-check {
    width: 32px;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}
.lp-audience__ml-table .lp-audience__ml-cell-check input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

/* ============================================================================
 * Creator > Promo Codes (spec: creator-promo-codes Phase 1)
 * ========================================================================== */

.lp-creator-promo-codes {
    color: #e5e5e5;
}

.lp-creator-promo-codes__header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.lp-creator-promo-codes-new {
    all: unset;
    cursor: pointer;
    background: #fff;
    color: #000;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s ease;
}

.lp-creator-promo-codes-new:hover,
.lp-creator-promo-codes-new:focus-visible {
    background: #d4d4d4;
}

.lp-creator-promo-codes__empty {
    padding: 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 8px;
    text-align: center;
    color: #a3a3a3;
}

.lp-creator-promo-codes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.lp-creator-promo-codes-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgba(255,255,255,0.16);
}

.lp-creator-promo-codes-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #e5e5e5;
    vertical-align: middle;
}

.lp-creator-promo-codes-table tr:last-child td {
    border-bottom: none;
}

.lp-creator-promo-codes-table tr:hover td {
    background: rgba(255,255,255,0.03);
}

.lp-creator-promo-code-code {
    font-family: ui-monospace, "SF Mono", "Menlo", monospace;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.08);
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    color: #fff;
}

.lp-creator-promo-edit-link {
    color: #a3a3a3;
    text-decoration: none;
    font-size: 0.78rem;
}

.lp-creator-promo-edit-link:hover {
    color: #fff;
    text-decoration: underline;
}

.lp-creator-promo-row-new td {
    background: rgba(34,197,94,0.12);
    transition: background 1.2s ease;
}

.lp-creator-promo-codes-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #a3a3a3;
}

.lp-creator-promo-codes-pagination button {
    all: unset;
    cursor: pointer;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    color: #e5e5e5;
    font-size: 0.78rem;
}

.lp-creator-promo-codes-pagination button:hover:not(:disabled) {
    background: rgba(255,255,255,0.08);
}

.lp-creator-promo-codes-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Drawer ── */

.lp-creator-promo-drawer {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    visibility: hidden;
}

.lp-creator-promo-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.lp-creator-promo-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lp-creator-promo-drawer[aria-hidden="false"] .lp-creator-promo-drawer__backdrop {
    opacity: 1;
}

.lp-creator-promo-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100%;
    background: #111;
    border-left: 1px solid rgba(255,255,255,0.12);
    box-shadow: -8px 0 32px rgba(0,0,0,0.6);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    color: #e5e5e5;
    display: flex;
    flex-direction: column;
}

.lp-creator-promo-drawer[aria-hidden="false"] .lp-creator-promo-drawer__panel {
    transform: translateX(0);
}

.lp-creator-promo-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.lp-creator-promo-drawer__header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.lp-creator-promo-drawer__close {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #a3a3a3;
    font-size: 1.4rem;
    line-height: 1;
}

.lp-creator-promo-drawer__close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* ── Form ── */

.lp-creator-promo-form {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.lp-creator-promo-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.lp-creator-promo-form__field > label,
.lp-creator-promo-form__field > legend {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a3a3;
    padding: 0;
}

.lp-creator-promo-form__field input[type="text"],
.lp-creator-promo-form__field input[type="number"],
.lp-creator-promo-form__field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    color: #fff;
    font-size: 0.9rem;
}

.lp-creator-promo-form__field input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);
}

.lp-creator-promo-form__field--radios label,
.lp-creator-promo-form__field--tiers label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: #e5e5e5;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.2rem 0;
    cursor: pointer;
}

.lp-creator-promo-form__field--tiers {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
}

.lp-creator-promo-form__field--tiers > legend {
    margin-bottom: 0.4rem;
}

.lp-creator-promo-form__hint {
    margin: 0;
    font-size: 0.72rem;
    color: #888;
}

.lp-creator-promo-form__hint-inline {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #888;
    font-size: 0.72rem;
}

.lp-creator-promo-form__feedback {
    margin: 0;
    font-size: 0.78rem;
    min-height: 1em;
}

.lp-creator-promo-form__feedback--ok {
    color: #4ade80;
}

.lp-creator-promo-form__feedback--err {
    color: #f87171;
}

.lp-creator-promo-form__error {
    margin: 0;
    padding: 0.55rem 0.75rem;
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.32);
    color: #fecaca;
    border-radius: 6px;
    font-size: 0.85rem;
}

.lp-creator-promo-form__actions {
    margin-top: auto;
    padding-top: 0.75rem;
}

.lp-creator-promo-form__submit {
    all: unset;
    cursor: pointer;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    color: #000;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.lp-creator-promo-form__submit:hover:not(:disabled) {
    background: #d4d4d4;
}

.lp-creator-promo-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .lp-creator-promo-codes-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lp-creator-promo-drawer__panel {
        width: 100%;
        border-left: 0;
    }
    .lp-creator-promo-form {
        padding: 1rem;
    }
    .lp-creator-promo-form__actions {
        position: sticky;
        bottom: 0;
        background: linear-gradient(to top, #111 60%, rgba(17,17,17,0));
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
}

/* ===== Creator > Signup Issues ===== */

.lp-creator-signup-issues {
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Onest', sans-serif;
}

.lp-creator-signup-issues__header {
    margin-bottom: 16px;
}

.lp-creator-signup-issues__empty-title {
    font-size: 0.95rem;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.85);
}

.lp-creator-signup-issues__empty-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 720px;
    margin: 0;
}

.lp-creator-signup-issues__count {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.lp-creator-signup-issues__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.85rem;
}

.lp-creator-signup-issues__table th,
.lp-creator-signup-issues__table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: top;
}

.lp-creator-signup-issues__table th {
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.lp-creator-signup-issues__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.lp-creator-signup-issues__table a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-creator-signup-issues__table a:hover {
    color: #fff;
}

.lp-creator-signup-issues__table em {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.lp-creator-signup-issues__table time {
    color: rgba(255, 255, 255, 0.7);
    cursor: help;
}

.lp-creator-signup-issues__pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.lp-creator-signup-issues__pill.is-recovered {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.4);
    color: #4ade80;
}

.lp-creator-signup-issues__pill.is-cleaned-up {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60a5fa;
}

.lp-creator-signup-issues__pill.is-stuck {
    background: rgba(255, 112, 112, 0.12);
    border-color: rgba(255, 112, 112, 0.45);
    color: #ff7070;
}

.lp-creator-signup-issues__pill.is-unknown {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.lp-creator-signup-issues__details {
    display: block;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
    padding: 4px 8px;
    border-radius: 3px;
    max-width: 420px;
    word-break: break-word;
    white-space: pre-wrap;
}

@media (max-width: 768px) {
    .lp-creator-signup-issues__table,
    .lp-creator-signup-issues__table thead,
    .lp-creator-signup-issues__table tbody,
    .lp-creator-signup-issues__table tr,
    .lp-creator-signup-issues__table th,
    .lp-creator-signup-issues__table td {
        display: block;
    }
    .lp-creator-signup-issues__table thead {
        display: none;
    }
    .lp-creator-signup-issues__table tr {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 8px;
    }
    .lp-creator-signup-issues__table td {
        padding: 6px 4px;
        border: none;
    }
    .lp-creator-signup-issues__table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 2px;
    }
}



/* ==========================================================================
   PASSWORD RESET CODE-FLOW — .lp-home__reset-code pane on home page
   Mirrors .lp-home__forgot-password aesthetic (dark blurred bg, underline
   inputs, pill submit). Per CLAUDE.md "Button / link specificity": all button
   rules scoped at (0,2,1) to beat Hello-Elementor global button styles.
   ========================================================================== */

.lp-home__reset-code {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 260px;
    max-width: calc(100vw - 3rem);
    padding: 1.2rem 1.4rem;
    background: rgba(0, 0, 0, 0.5);
}

.lp-home__reset-code-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
}

.lp-home__reset-code-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lp-home__reset-code-field label {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    font-family: inherit;
}

.lp-home__reset-code-field input[type="text"],
.lp-home__reset-code-field input[type="password"] {
    all: unset;
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0 0.3rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    font-family: inherit;
}
.lp-home__reset-code-field input[type="text"]:focus,
.lp-home__reset-code-field input[type="password"]:focus {
    outline: none;
    border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* Code input — monospace + wide tracking so the 6 digits read as a one-shot. */
.lp-home__reset-code-field input[name="code"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.4em;
    text-align: center;
    font-size: 1rem;
}

/* Specificity (0,2,1) — beats Elementor / Hello-theme generic button rules. */
.lp-home__reset-code button.lp-home__reset-code-submit,
.lp-home__reset-code button[type="submit"] {
    all: unset;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-block;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    margin-top: 0.3rem;
}
.lp-home__reset-code button.lp-home__reset-code-submit:hover,
.lp-home__reset-code button[type="submit"]:hover,
.lp-home__reset-code button.lp-home__reset-code-submit:focus-visible,
.lp-home__reset-code button[type="submit"]:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    outline: none;
}

.lp-home__reset-code-back,
.lp-home__reset-code-resend {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
    text-decoration: underline;
    text-align: center;
    transition: color 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    margin-top: 0.1rem;
}
.lp-home__reset-code-back:hover,
.lp-home__reset-code-resend:hover {
    color: #fff;
}

.lp-home__reset-code-result {
    color: #fff;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.5;
    text-transform: lowercase;
    padding: 0.3rem 0;
}

/* Dark theme — uses the same translucent black panel; explicit no-op to
   document the inheritance and provide a hook for future divergence. */
body.lp-theme-dark .lp-home__reset-code {
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .lp-home__reset-code {
        width: calc(100vw - 3rem);
        max-width: 320px;
        padding: 1.3rem 1.5rem;
    }
    /* iOS Safari zooms inputs with font-size < 16px on focus. */
    .lp-home__reset-code-field input[type="text"],
    .lp-home__reset-code-field input[type="password"] {
        font-size: 1rem;
        padding: 0.4rem 0 0.35rem 0;
    }
    .lp-home__reset-code-field input[name="code"] {
        font-size: 1.1rem;
    }
    .lp-home__reset-code-submit {
        font-size: 0.75rem;
        padding: 0.4rem 1.1rem;
    }
}

/* ─── creator-intern-account ──────────────────────────────────────────────
 * Intern management panel + intern-replied audit badge.
 * Spec: openspec/changes/creator-intern-account
 */

/* Dark cdash chrome — matches Tiers / Site Controls panels. */
.lp-cdash-intern {
    max-width: 560px;
    padding: 1rem 0;
    color: #e5e5e5;
}
.lp-cdash-intern__empty,
.lp-cdash-intern__panel {
    background: #171717;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}
.lp-cdash-intern__empty h3,
.lp-cdash-intern__panel h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 600;
}
.lp-cdash-intern__help {
    color: #a3a3a3;
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0 0 1.1rem 0;
}
.lp-cdash-intern__form label,
.lp-cdash-intern__reset label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    color: #a3a3a3;
    letter-spacing: 0.01em;
}
.lp-cdash-intern__form input,
.lp-cdash-intern__reset input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    margin-top: 0.3rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    font-size: 0.95rem;
    color: #ffffff;
    color-scheme: dark;
}
.lp-cdash-intern__form input:focus,
.lp-cdash-intern__reset input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.09);
}
.lp-cdash-intern__warn {
    background: rgba(240,198,116,0.08);
    border: 1px solid rgba(240,198,116,0.3);
    color: #f0c674;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.lp-cdash-intern__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #2a2a2a;
    font-size: 0.9rem;
}
.lp-cdash-intern__row:last-of-type { border-bottom: none; }
.lp-cdash-intern__row strong {
    color: #ffffff;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}
.lp-cdash-intern__label {
    color: #a3a3a3;
    font-weight: normal;
}
.lp-cdash-intern__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.lp-cdash-intern__reset {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #2a2a2a;
}
.lp-cdash-intern__msg {
    margin-top: 0.7rem;
    padding: 0.55rem 0.75rem;
    background: rgba(134,239,172,0.08);
    border: 1px solid rgba(134,239,172,0.3);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #86efac;
}
.lp-cdash-intern__error {
    margin-top: 0.7rem;
    padding: 0.55rem 0.75rem;
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.3);
    border-radius: 4px;
    font-size: 0.85rem;
    color: #fca5a5;
}

/* Intern-replied badge — small pill rendered alongside intern-authored
 * message bubbles in the creator's BM inbox. */
.lp-intern-replied {
    position: relative;
}
.lp-intern-replied::after {
    content: 'intern';
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    border-radius: 7px;
    background: #f0e6ff;
    color: #5a2bda;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* ── Picker UI alias: .lp-cdash-hbg (Home BG card) — same styles as .lp-cdash-mbg ── */
/* ── Picker UI: .lp-cdash-hbg ──────────────────────────────────────────── */
/* QA pass: section dividers softened — borders dropped, heading rule
   removed. Sibling Site Controls cards (Home banner, Home background,
   pin cards) have no internal dividers; this card now matches. */
.lp-cdash-hbg__section {
    margin-top: 12px;
}
.lp-cdash-hbg__section:first-of-type {
    margin-top: 4px;
}
.lp-cdash-hbg__sub-hint {
    font-size: 12px;
    color: #999;
    margin: 0 0 8px;
}
.lp-cdash-hbg__sub-title {
    color: #ddd;
    font-weight: 600;
}
.lp-cdash-hbg__sub-label {
    display: block;
    font-size: 12px;
    color: #ccc;
    margin: 8px 0 4px;
}
.lp-cdash-hbg__inline-note {
    font-size: 12px;
    color: #aaa;
    background: rgba(255, 200, 0, 0.06);
    border-left: 2px solid #c0a040;
    padding: 6px 10px;
    margin: 0 0 10px;
}
.lp-cdash-hbg__radio-row {
    display: flex;
    gap: 14px;
    margin-bottom: 10px;
}
.lp-cdash-hbg__radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ddd;
    font-size: 13px;
    cursor: pointer;
}
.lp-cdash-hbg__panel {
    margin-top: 8px;
}
.lp-cdash-hbg__panel[hidden] {
    display: none;
}
.lp-cdash-hbg__field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ddd;
    font-size: 13px;
    margin-right: 12px;
}
.lp-cdash-hbg__color {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid #444;
    background: transparent;
    cursor: pointer;
}
.lp-cdash-hbg__color-text {
    width: 90px;
    background: #111;
    color: #eee;
    border: 1px solid #333;
    padding: 4px 6px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
}
.lp-cdash-hbg__bunny-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-cdash-hbg__bunny-wrap--mobile {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #2a2a2a;
}
.lp-cdash-hbg__preview {
    max-width: 120px;
    max-height: 72px;
    object-fit: cover;
    border: 1px solid #333;
    border-radius: 4px;
}
.lp-cdash-hbg__filename {
    font-size: 12px;
    color: #aaa;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.lp-cdash-hbg__quality-label {
    color: #ddd;
    font-size: 12px;
    margin-left: 6px;
}
.lp-cdash-hbg__quality {
    background: #111;
    color: #eee;
    border: 1px solid #333;
    padding: 3px 6px;
    font-size: 12px;
}
.lp-cdash-hbg__field-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}
.lp-cdash-hbg__field-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ddd;
    font-size: 13px;
}
.lp-cdash-hbg__field-row input[type="range"] {
    width: 160px;
}
.lp-cdash-hbg__field-row output {
    color: #aaa;
    font-size: 12px;
    min-width: 38px;
    font-variant-numeric: tabular-nums;
}
.lp-cdash-hbg__section[hidden] {
    display: none;
}

/* ─── Switch-to-LP modal + banner + Patreon-source sub-card pills ─────
 * See openspec/changes/patreon-grant-access-parity.
 */
.lp-sub-card__pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    vertical-align: middle;
}
.lp-sub-card__pill--patreon          { background: rgba(255,67,67,0.18); color: #ff9090; }
.lp-sub-card__pill--patreon-declined { background: rgba(255,176,32,0.18); color: #ffc870; }
.lp-sub-card__pill--grace            { background: rgba(120,180,255,0.18); color: #a8c8ff; }
.lp-sub-card__link {
    display: inline-block;
    margin-top: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    color: rgba(255,255,255,0.6);
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}
.lp-sub-card__link:hover { color: #fff; }

.lp-switch-to-lp .lp-account-modal__panel {
    max-width: 540px;
}
.lp-switch-to-lp__lead {
    font-size: 15px;
    margin: 8px 0 12px;
    color: rgba(255,255,255,0.85);
}
.lp-switch-to-lp__warn {
    background: rgba(255,176,32,0.10);
    border: 1px solid rgba(255,176,32,0.30);
    border-radius: 8px;
    padding: 12px 14px;
    color: #ffcd80;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.45;
}
.lp-switch-to-lp__warn-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
}
.lp-switch-to-lp__steps-title {
    font-weight: 600;
    margin: 0 0 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}
.lp-switch-to-lp__steps {
    margin: 0 0 16px;
    padding-left: 22px;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.55;
}
.lp-switch-to-lp__steps li { margin-bottom: 6px; }
.lp-switch-to-lp__patreon {
    display: inline-block;
    margin-left: 6px;
    color: #a8c8ff;
    text-decoration: underline;
}
.lp-switch-to-lp__confirm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

.lp-banner--switch-to-lp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,176,32,0.12);
    border: 1px solid rgba(255,176,32,0.35);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    color: #ffd7a0;
    font-size: 14px;
    line-height: 1.4;
}
.lp-banner--switch-to-lp .lp-banner__copy {
    margin: 0;
    flex: 1;
}
.lp-banner--switch-to-lp a {
    color: #ffe6c0;
    text-decoration: underline;
}
.lp-banner__dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    opacity: 0.7;
}
.lp-banner__dismiss:hover { opacity: 1; }