/* Rameez Scripts — page-code-file rules, split out of styles.css (2026-09-19) so only this page parses them.
   Load AFTER styles.css. Selectors stay scoped to body.page-code-file — a rule that must reach other pages belongs in styles.css. */

/* ============================================================
   PAGE: code_file.php  —  all rules below scoped to body.page-code-file
   so generic class names (.container, .badge, .btn-primary, …) never
   leak to other pages. Migrated from code_file.php inline <style> blocks.
   ============================================================ */

/* squared theme — sharp corners like Key Features; zero the rounding tokens for THIS page only.
   --radius-pill / --radius-full intentionally left alone so toggles, status dots & avatars stay round. */
/* curved design like the landing header — soft radius scale + navy vars remapped to the live ui_setting palette */
body.page-code-file { --radius-xs: 8px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --navy-primary: var(--c-primary); --navy-dark: var(--c-primary-dark); --navy-light: var(--c-secondary); --navy-accent: var(--c-accent); --navy-hover: var(--c-primary-hover); --navy-800: var(--c-primary); --gradient-navy: linear-gradient(135deg, var(--c-primary), var(--c-secondary)); }

/* success tone — muted pine, ONLY for real "done/verified/granted" moments.
   Decorative greens on this page use the live palette tokens instead, so nothing
   clashes whatever ui_setting is active. */
body.page-code-file {
    --cf-ok: #15803d;
    --cf-ok-deep: #166534;
    --cf-ok-tint: #f0fdf4;
    --cf-ok-tint-2: #dcfce7;
    --cf-ok-line: #bbf7d0;
    --cf-ok-rgb: 21, 128, 61;
}

/* --- Unified mobile action bar (headline mobile CTA) --- */
body.page-code-file .mobile-action-bar { display: none; }

@media (max-width: 768px) {
    body.page-code-file .mobile-action-bar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: var(--z-overlay, 9000);
        align-items: center;
        gap: var(--space-3, 12px);
        padding: var(--space-3, 12px) var(--space-4, 16px);
        padding-bottom: calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
        background: var(--white, #fff);
        border-top: 1px solid var(--border-color, #e2e8f0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        min-height: var(--cf-action-bar-h);   /* the token the body padding reserves */
        box-sizing: border-box;
    }
    body.page-code-file .mab-info { flex: 1; min-width: 0; }
    body.page-code-file .mab-info-main {
        font-size: var(--text-lg, 18px);
        font-weight: var(--weight-extra, 800);
        line-height: 1.1;
        color: var(--navy-800, var(--c-primary));
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.page-code-file .mab-info-sub {
        font-size: 12px; margin-top: 2px;
        color: var(--text-muted, #64748b);
    }
    body.page-code-file .mab-btn {
        flex-shrink: 0;
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 44px;
        padding: var(--space-3, 12px) var(--space-6, 22px);
        border: none;
        border-radius: var(--radius-sm, 4px);
        font-size: var(--text-base, 14px);
        font-weight: var(--weight-extra, 800);
        color: var(--white, #fff);
        cursor: pointer;
        background: var(--gradient-navy, linear-gradient(135deg, var(--c-primary), var(--c-secondary)));
        box-shadow: var(--shadow-md, 0 4px 12px rgba(var(--c-primary-rgb), 0.3));
        transition: transform var(--duration-fast, 0.15s) ease;
    }
    body.page-code-file .mab-btn:active { transform: scale(0.97); }
    /* the bar rides ABOVE the shared bottom nav, and the body reserves both. these were two
       separate 768px blocks — the first one's bottom:0 / 76px never applied, which is exactly
       how a "why does my edit do nothing" hour starts */
    body.page-code-file .mobile-action-bar {
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ph-bottom-nav-h));
    }
    body.page-code-file.has-mobile-action-bar {
        padding-bottom: calc(var(--ph-bottom-nav-h) + var(--cf-action-bar-h) + env(safe-area-inset-bottom, 0px));
    }
}

/* --- "Registered & Verified Business" — enterprise credentials block --- */
body.page-code-file .cf-cred { margin-top: 16px; }  /* container-less — flows inside the Get Source Code box */
/* non-checkout views (free + get-source): single stacked column — video, desc 100%, CTA, global, what-you-get (paid checkout keeps its 7/5 price sidebar) */
@media (min-width: 769px) {
    body.page-code-file .checkout-grid.cf-grid-even { grid-template-columns: 1fr; align-items: stretch; }
}

/* rounded/curved corners to match the curved header */
body.page-code-file .cf-cred,
body.page-code-file .cf-faq-card,
body.page-code-file .cf-custom-card,
body.page-code-file .video-container,
body.page-code-file .video-desc-acc,
body.page-code-file .checkout-video-wrap { border-radius: var(--radius-md) !important; overflow: hidden; }
body.page-code-file .video-container iframe,
body.page-code-file .checkout-video-wrap iframe { border-radius: var(--radius-md); }
/* free-view unlock cards too (inline radius:0 overridden) */
body.page-code-file #verifiedActionsSection,
body.page-code-file #subscriptionNoticeBanner,
body.page-code-file #youtubeAuthSection { border-radius: var(--radius-md) !important; }
body.page-code-file .cf-cred-points { list-style: none; margin: 0; padding: 13px 0; display: flex; flex-direction: column; gap: 10px; }
body.page-code-file .cf-cred-points li { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-primary); line-height: 1.35; }
body.page-code-file .cf-cred-points li + li { border-top: 1px solid #eef2f7; padding-top: 10px; }
body.page-code-file .cf-cred-points li > i { color: #0a6b3d; font-size: 14px; flex-shrink: 0; }
body.page-code-file .cf-cred-points li em { font-style: normal; font-weight: 500; color: #64748b; font-size: 12px; }
body.page-code-file .cf-cred .cf-flag { height: 13px; width: auto; border-radius: 2px; vertical-align: -2px; margin: 0 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
body.page-code-file .cf-cred-label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 12px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
body.page-code-file .cf-cred-label i { color: var(--c-accent); font-size: 11px; }
body.page-code-file .cf-cred-label + .cf-cred-points { padding-top: 9px; padding-bottom: 12px; }
body.page-code-file .cf-cred-label:not(:first-child) { border-top: 1px solid #eef2f7; padding-top: 13px; }

/* ===== Get Source Code package card (gsc) — squared, navy, FA icons ===== */

body.page-code-file .gsc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 360px; max-width: 100%; padding: 18px 34px; background: linear-gradient(135deg, #17846f, #0d6557); color: #fff; text-decoration: none; font-size: 17px; font-weight: 800; box-shadow: 0 12px 28px rgba(13, 101, 87, .26); transition: transform .25s ease, box-shadow .25s ease; }
body.page-code-file .gsc-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13, 101, 87, .34); }
body.page-code-file .gsc-btn-demo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 360px; max-width: 100%; margin-top: 12px; padding: 14px 28px; background: #fff; border: 1px solid #cbd5e1; color: var(--c-primary); text-decoration: none; font-size: 15px; font-weight: 700; transition: border-color .2s, color .2s; }
body.page-code-file .gsc-btn-demo:hover { border-color: var(--c-accent); color: var(--c-accent); }
@media (max-width: 900px) {

    body.page-code-file .gsc-btn, body.page-code-file .gsc-btn-demo { min-width: 100%; }
}

/* payment-off paid file: Get-Source CTA inside the checkout-sidebar panel — full-width buttons */
body.page-code-file .checkout-sidebar .gsc-btn,
body.page-code-file .checkout-sidebar .gsc-btn-demo { min-width: 0; width: 100%; margin-top: var(--space-3); box-sizing: border-box; }
/* "Hire Us for Customization" CTA — navy, distinct from green get-source + outline demo */
body.page-code-file .checkout-sidebar .gsc-btn-hire { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; margin-top: var(--space-3); padding: 14px 28px; background: var(--gradient-navy); color: #fff; text-decoration: none; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(var(--c-primary-rgb), .22); transition: transform .2s ease, box-shadow .2s ease; }
body.page-code-file .checkout-sidebar .gsc-btn-hire:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--c-primary-rgb), .3); }
/* payment-off, no key features: license panel goes full-width (single centered card, no empty left col) */
body.page-code-file .checkout-grid.cf-grid-single { grid-template-columns: 1fr; }
body.page-code-file .checkout-grid.cf-grid-single .checkout-right { position: static; top: auto; max-width: 760px; width: 100%; margin: 0 auto; }

/* --- payment modal close buttons — comfortable tap target --- */
body.page-code-file .paytm-header > button,
body.page-code-file .binance-header > button,
body.page-code-file .crypto-header > button { width: 40px !important; height: 40px !important; font-size: 18px !important; }

/* --- File Info card (paid checkout, under the video) — unified shell --- */
body.page-code-file .cf-fileinfo-card { margin-top: var(--space-5); padding: var(--space-5); background: #fff; border: 1px solid #e6edf5; box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .04), 0 12px 30px rgba(var(--c-primary-rgb), .06); box-sizing: border-box; }
@media (max-width: 600px) { body.page-code-file .cf-fileinfo-card { padding: var(--space-4) var(--space-3); } }

/* --- What You'll Get card — standalone shell (info-box wrapper removed) --- */

/* --- navy-lock the custom-project card stats (one accent, no yellow/rainbow) --- */
body.page-code-file .cf-custom-card .trust-grid > div { background: #f0f7ff !important; border-color: #cfe2ff !important; }
body.page-code-file .cf-custom-card .trust-grid > div > div:first-child { color: var(--c-accent) !important; }

/* ============================================================
   code_file.php — Phase 4 enterprise polish.
   All rules scoped under body.page-code-file. Hardcoded
   colors / spacing / shadows / radii tokenized; component
   recipes unified; focus-visible + active states added.
   ============================================================ */

body.page-code-file {
    font-family: var(--font-family-base); /* Inter — the site face, no per-page override */
    background: var(--gradient-page);
    background-attachment: fixed;
    line-height: var(--leading-normal);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* allow text selection in form fields */
body.page-code-file input,
body.page-code-file textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* prevent image drag */
body.page-code-file img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* video controls stay interactive */
body.page-code-file video,
body.page-code-file iframe {
    pointer-events: auto;
}

/* --- CHUNK 1: Buttons (unified recipe) --- */
body.page-code-file .btn-primary {
    display: inline-block;
    background: var(--gradient-accent);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    margin: var(--space-1);
    min-height: 44px;
    box-shadow: 0 4px 12px rgba(var(--c-accent-rgb), 0.3);
    transition: var(--transition-base);
}
body.page-code-file .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), 0.4);
}
body.page-code-file .btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}
body.page-code-file .btn-primary:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}
body.page-code-file .btn-secondary {
    background: var(--surface-card);
    color: var(--navy-800);
    border: 2px solid var(--navy-500);
}
body.page-code-file .btn-whatsapp {
    background: linear-gradient(135deg, var(--c-support, #25D366) 0%, var(--c-support-dark, #128C7E) 100%);
    color: var(--text-inverse);
    border: none;
}
body.page-code-file .btn-whatsapp:hover {
    background: linear-gradient(135deg, var(--c-support-dark, #128C7E) 0%, #075E54 100%);
}

/* --- CHUNK 2: Cards / elevation --- */
body.page-code-file .content-section {
    background: var(--surface-card);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
body.page-code-file .file-header {
    background: var(--surface-card);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-md);
}
body.page-code-file .file-header h1 {
    color: var(--text-primary);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin-bottom: var(--space-4);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}
body.page-code-file .file-meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
body.page-code-file .cf-faq-card,
body.page-code-file .cf-custom-card,
body.page-code-file .auth-section {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 22px rgba(var(--c-primary-rgb), .08);
    margin: 0 0 var(--space-8);
    box-sizing: border-box;
}
body.page-code-file .cf-faq-card,
body.page-code-file .cf-custom-card,
body.page-code-file .auth-section {
    padding: var(--space-8);
}

/* ===== Professional layout polish — squared, unified card shells (chunk 1) ===== */
/* one refined elevation + squared corners for every major box,
body.page-code-file .cf-faq-card,
body.page-code-file .cf-custom-card,
body.page-code-file .auth-section,
body.page-code-file .content-section,
body.page-code-file #verifiedActionsSection {
    border-radius: var(--radius-md) !important;
    box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .04), 0 12px 30px rgba(var(--c-primary-rgb), .06) !important;
}
/* inline-styled flow sections → match the card rhythm, drop the chunky borders */
body.page-code-file #verifiedActionsSection {
    margin: 0 0 var(--space-8) !important;
    box-sizing: border-box !important;
}
body.page-code-file #verifiedActionsSection {
    border: 1px solid var(--c-accent-soft) !important;
    border-top: 3px solid var(--c-accent) !important;  /* palette chrome; green cue lives in the banner inside */
}
/* consistent section headings across cards */
body.page-code-file .cf-faq-card > h3,
body.page-code-file .cf-custom-card h3 {
    font-size: 19px !important;
    color: var(--c-primary) !important;
}
/* unified primary CTAs — apple-style pills, one shadow weight */
body.page-code-file #getSourceCodeBtn,
body.page-code-file #verifiedDownloadBtn,
body.page-code-file #buyWithPointsBtn,
body.page-code-file #startWatchingBtn {
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .18) !important;
}

/* ===== Curved containers (matches landing/login) ===== */
/* round every box/card/button/modal/badge in one move via the radius tokens;
   circular elements use --radius-full / 50% so they stay round */
body.page-code-file {
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}
/* elements with inline radii that bypass the tokens */
body.page-code-file .checkout-video-wrap,
body.page-code-file .checkout-video-wrap iframe,
body.page-code-file #youtubeAuthSection {
    border-radius: var(--radius-lg) !important;
}
body.page-code-file .paytm-header,
body.page-code-file .binance-header,
body.page-code-file .crypto-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; /* card top strip */
}
body.page-code-file #getSourceCodeBtn {
    border-radius: 999px !important;
}
body.page-code-file .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
}
body.page-code-file .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
body.page-code-file .no-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--gray-400);
    font-size: var(--text-md);
}

/* --- CHUNK 3: Badges / pills --- */
body.page-code-file .badge {
    color: var(--text-inverse);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-sm);
}
body.page-code-file .code-badge {
    background: linear-gradient(135deg, var(--gray-500), var(--gray-700));
}
body.page-code-file .category-badge {
    background: var(--gradient-navy);
}
body.page-code-file .plan-badge {
    background: var(--gradient-navy);
}

/* --- CHUNK 4: Typography / section titles --- */
body.page-code-file .section-title {
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
    color: var(--navy-900);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--border-color);
    flex-wrap: wrap;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}
body.page-code-file .highlight {
    background: #fef3c7;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    color: #92400e;
}

/* --- CHUNK 5: Public header --- */
body.page-code-file .public-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gradient-navy);
    color: var(--text-inverse);
    padding: var(--space-4) var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    z-index: var(--z-sticky);
}
body.page-code-file .public-header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
body.page-code-file .public-header-brand img {
    flex-shrink: 0;
}
body.page-code-file .public-header-brand h2 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    margin: 0;
}
body.page-code-file .public-header-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
body.page-code-file .public-header-actions a {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    min-height: 44px;
}
body.page-code-file .public-header-actions a:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}
body.page-code-file .public-header-actions .whatsapp-header-btn {
    background: var(--c-support, #25d366);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
body.page-code-file .public-header-actions .whatsapp-header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    background: #1da851;
}

/* --- Page container --- */
body.page-code-file .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-5);
    overflow-x: hidden;
    box-sizing: border-box;
    width: 92%;
}

/* --- CHUNK 13: Legacy WhatsApp / lifetime banner --- */

/* below-fold sections skip rendering until scrolled near — big win on slow devices */
body.page-code-file .related-files-section,
body.page-code-file .cf-faq-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* --- CHUNK 8: Milestone (subscribers) banner --- */
body.page-code-file .subscribers-milestone-banner {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
    padding: var(--space-5) var(--space-6);
    box-shadow: 0 10px 30px rgba(var(--c-accent-rgb), 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    position: relative;
    overflow: hidden;
}
body.page-code-file .subscribers-milestone-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: cf-shimmer 3s infinite;
}
body.page-code-file .milestone-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    position: relative;
    z-index: var(--z-base);
}
body.page-code-file .milestone-text {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}
body.page-code-file .milestone-emoji {
    font-size: 34px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    animation: cf-bounce 2s ease-in-out infinite;
}
body.page-code-file .milestone-emoji:empty {
    display: none;
}
body.page-code-file .milestone-message {
    color: #ffffff;
}
body.page-code-file .milestone-main {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
    line-height: var(--leading-snug);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
body.page-code-file .milestone-main strong {
    font-weight: var(--weight-extra);
    color: #ffffff;
}
body.page-code-file .milestone-sub {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: rgba(255, 255, 255, 0.92);
    font-style: normal;
}
body.page-code-file .subscribe-btn {
    background: #ffffff;
    color: var(--c-primary);
    padding: var(--space-3) var(--space-8);
    border-radius: 999px;
    text-decoration: none;
    font-weight: var(--weight-extra);
    font-size: var(--text-md);
    min-height: 44px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border: 2px solid transparent;
    animation: cf-cta-ring 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .subscribe-btn,
    body.page-code-file .milestone-emoji {
        animation: none;
    }
}
body.page-code-file .subscribe-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
    background: var(--c-accent);
    color: #ffffff;
    border-color: var(--white);
}
body.page-code-file .subscribe-btn:active {
    transform: translateY(0) scale(1);
}
body.page-code-file .subscribe-btn:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}
body.page-code-file .subscribe-btn svg {
    flex-shrink: 0;
}

/* .is-alert = notification skin (code_file.php only) — soft red from the admin settings
   banner preview; source_code.php keeps the themed banner above. Don't tokenize to --c-*. */
body.page-code-file .subscribers-milestone-banner.is-alert {
    background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
    box-shadow: 0 10px 30px rgba(183, 28, 28, 0.18);
    border-color: #e57373;
}
body.page-code-file .subscribers-milestone-banner.is-alert::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-emoji {
    background: rgba(255, 255, 255, 0.6);
    border-color: #e57373;
}
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-message {
    color: #b71c1c;
}
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-main {
    text-shadow: none;
}
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-main strong {
    color: #c62828;
}
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-sub {
    color: #d32f2f;
}
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn {
    background: linear-gradient(135deg, #ef5350 0%, #c62828 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(198, 40, 40, 0.35);
    animation-name: cf-cta-ring-alert;
}
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn:hover {
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%);
    box-shadow: 0 6px 22px rgba(198, 40, 40, 0.45);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
}
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn:focus-visible {
    outline-color: #b71c1c;
}
/* Subscribe banner — ONE fixed palette (owner order 2026-08-23), identical on code_file.php and
   source_code.php. Exact hexes, deliberately NOT tokenized to --c-*: this scheme is set on its
   own, not off the site theme. Listed last and with matching specificity so BOTH skins resolve
   here — the plain one source_code.php renders, and the .is-alert one code_file.php renders.
   bg #EFF6FF · border #BFDBFE · heading #1E3A8A · text #475569 · button #2563EB */
body.page-code-file .subscribers-milestone-banner,
body.page-code-file .subscribers-milestone-banner.is-alert {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12);
}
/* a white shimmer is invisible on a near-white panel — tint it so the sweep still reads */
body.page-code-file .subscribers-milestone-banner::before,
body.page-code-file .subscribers-milestone-banner.is-alert::before {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.10), transparent);
}
body.page-code-file .subscribers-milestone-banner .milestone-emoji,
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-emoji {
    background: #ffffff;
    border-color: #BFDBFE;
}
body.page-code-file .subscribers-milestone-banner .milestone-message,
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-message {
    color: #1E3A8A;
}
/* the base skin shadows its heading for white-on-navy — on a light panel that just smudges */
body.page-code-file .subscribers-milestone-banner .milestone-main,
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-main {
    color: #1E3A8A;
    text-shadow: none;
}
body.page-code-file .subscribers-milestone-banner .milestone-main strong,
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-main strong {
    color: #1E3A8A;
}
body.page-code-file .subscribers-milestone-banner .milestone-sub,
body.page-code-file .subscribers-milestone-banner.is-alert .milestone-sub {
    color: #475569;
}
body.page-code-file .subscribers-milestone-banner .subscribe-btn,
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn {
    background: #2563EB;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.30);
    animation-name: cf-cta-ring-blue;
}
/* hover darkens the SAME button colour — no second hue invented for a state */
body.page-code-file .subscribers-milestone-banner .subscribe-btn:hover,
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn:hover {
    background: #1D4ED8;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.42);
}
body.page-code-file .subscribers-milestone-banner .subscribe-btn:focus-visible,
body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn:focus-visible {
    outline-color: #2563EB;
}

/* keep the reduced-motion opt-out working past every higher-specificity rule above — it has to
   stay LAST, or the animation-name set in the palette block would quietly revive the pulse */
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .subscribers-milestone-banner .subscribe-btn,
    body.page-code-file .subscribers-milestone-banner.is-alert .subscribe-btn {
        animation: none;
    }
}

/* --- CHUNK 8: VIP membership banner --- */
body.page-code-file .vip-membership-banner {
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 50%, var(--navy-500) 100%);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 2px solid rgba(var(--c-accent-rgb), 0.3);
}
body.page-code-file .vip-membership-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    animation: cf-vipShimmer 4s infinite;
}
body.page-code-file .vip-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    position: relative;
    z-index: var(--z-base);
}
body.page-code-file .vip-banner-left {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
}
body.page-code-file .vip-banner-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}
body.page-code-file .vip-banner-icon i {
    font-size: var(--text-2xl);
    color: var(--text-inverse);
}
body.page-code-file .vip-banner-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--text-inverse);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--weight-extra);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-1);
}
body.page-code-file .vip-banner-text {
    color: var(--text-inverse);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}
body.page-code-file .vip-banner-text strong {
    color: #fbbf24;
    font-weight: var(--weight-extra);
}
body.page-code-file .vip-banner-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--text-inverse);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    transition: var(--transition-base);
    border: 2px solid transparent;
}
body.page-code-file .vip-banner-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 25px rgba(245, 158, 11, 0.6);
    border-color: var(--white);
}
body.page-code-file .vip-banner-btn:active {
    transform: translateY(0) scale(1);
}
body.page-code-file .vip-banner-btn:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}
body.page-code-file .vip-banner-trust {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-1);
}
body.page-code-file .vip-banner-trust span {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
body.page-code-file .vip-banner-trust i {
    color: var(--c-accent-soft);
    font-size: 10px;
}

/* --- CHUNK 7: Scheduled file countdown banner --- */
body.page-code-file .scheduled-countdown-banner {
    background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 50%, var(--navy-500) 100%);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
body.page-code-file .scheduled-countdown-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}
body.page-code-file .scheduled-countdown-icon {
    font-size: var(--text-4xl);
    color: #ffd700;
    margin-bottom: var(--space-4);
    animation: cf-pulse-clock 2s ease-in-out infinite;
}
body.page-code-file .scheduled-countdown-title {
    color: var(--text-inverse);
    font-size: var(--text-3xl);
    font-weight: var(--weight-extra);
    margin: 0 0 var(--space-1) 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
body.page-code-file .scheduled-countdown-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-md);
    margin: 0 0 var(--space-8) 0;
    font-weight: var(--weight-medium);
}
body.page-code-file .scheduled-countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
body.page-code-file .countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    min-width: 80px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
body.page-code-file .countdown-value {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extra);
    color: var(--text-inverse);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
body.page-code-file .countdown-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--space-1);
    font-weight: var(--weight-semibold);
}
body.page-code-file .countdown-separator {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: rgba(255, 255, 255, 0.5);
    padding-bottom: var(--space-5);
}
body.page-code-file .scheduled-countdown-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
    margin: 0;
    font-weight: var(--weight-medium);
}
body.page-code-file .scheduled-countdown-note i {
    color: #ffd700;
    margin-right: var(--space-1);
}

/* --- CHUNK 11: How It Works table / info box --- */
body.page-code-file .about-table-wrapper {
    overflow-x: auto;
    margin: 0;
}
body.page-code-file .about-roles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}
body.page-code-file .about-roles-table th,
body.page-code-file .about-roles-table td {
    padding: var(--space-3) var(--space-4);
    text-align: center;
    border: 1px solid var(--border-color);
}
body.page-code-file .about-roles-table th {
    background: var(--navy-800);
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
}
body.page-code-file .about-roles-table th:first-child {
    text-align: left;
}
body.page-code-file .about-roles-table td:first-child {
    text-align: left;
    font-weight: var(--weight-medium);
    background: var(--surface-subtle);
}
body.page-code-file .about-roles-table tbody tr:hover {
    background: var(--navy-50);
}
body.page-code-file .details-box {
    background: linear-gradient(135deg, var(--surface-subtle) 0%, var(--white) 100%);
    border: 2px solid var(--navy-500);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
    line-height: 2;
    margin-bottom: var(--space-8);
}
body.page-code-file .details-box strong {
    color: var(--navy-800);
    font-size: var(--text-base);
}

/* --- CHUNK 9: Setup guide steps / tips --- */
body.page-code-file .step {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--navy-500);
}
body.page-code-file .step-number {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: var(--gradient-accent);
    color: var(--text-inverse);
    text-align: center;
    line-height: 35px;
    border-radius: var(--radius-full);
    font-weight: var(--weight-semibold);
    margin-right: var(--space-4);
    font-size: var(--text-md);
}
body.page-code-file .step-title {
    font-size: var(--text-lg);
    color: var(--text-body);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
}
body.page-code-file .step-content {
    margin-left: 50px;
    color: var(--gray-600);
    line-height: 1.8;
}
body.page-code-file .step-content ul {
    margin: var(--space-3) 0;
    padding-left: var(--space-5);
}
body.page-code-file .step-content li {
    margin-bottom: var(--space-2);
}
body.page-code-file .tip-box {
    background: linear-gradient(135deg, var(--color-info-light) 0%, #bfdbfe 100%);
    border: 1px solid #3b82f6;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    display: flex;
    align-items: start;
    gap: var(--space-3);
}
body.page-code-file .tip-box .icon {
    font-size: var(--text-2xl);
    flex-shrink: 0;
}
body.page-code-file .warning-box {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    display: flex;
    align-items: start;
    gap: var(--space-3);
}
body.page-code-file .warning-box .icon {
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

/* --- CHUNK 9: Related / setup-guide videos --- */

/* mobile / small tablet: stack the heavy grids 1-per-row */
@media (max-width: 768px) {
    body.page-code-file .customize-grid,
    body.page-code-file .cf-grid-even,
    body.page-code-file .checkout-grid.cf-grid-even {
        grid-template-columns: 1fr !important;
    }
    /* key features: compact 2-up chips, not a tall single column */
    body.page-code-file .cf-features-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
    body.page-code-file .cf-feat { min-height: 34px; padding: 7px 9px; font-size: 11.5px; gap: 6px; }
    body.page-code-file .cf-feat-ic { width: 18px; height: 18px; font-size: 9px; }
    /* stat tiles: compact 2-3 per row instead of stacking */
    body.page-code-file .trust-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 8px !important; }
}
body.page-code-file .video-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    cursor: pointer;
    border: 2px solid transparent;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
body.page-code-file .video-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--navy-500);
}
body.page-code-file .video-card.hidden {
    display: none;
}

/* --- CHUNK 12: "Need This Customized?" / prompt section --- */
body.page-code-file .file-prompt-section {
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--navy-500);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
}

/* --- CHUNK 14: Checkout grid + sticky sidebar --- */
body.page-code-file .checkout-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
    margin: var(--space-5) 0;
    align-items: start;
}
body.page-code-file .checkout-left {
    min-width: 0;
}
body.page-code-file .checkout-right {
    position: sticky;
    top: var(--space-5);
}
body.page-code-file .checkout-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-lg);
}
body.page-code-file .checkout-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
body.page-code-file .checkout-sidebar {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .04), 0 12px 30px rgba(var(--c-primary-rgb), .08);
}
/* stat tiles — subtle lift, enterprise feel */
body.page-code-file .trust-grid > div { transition: box-shadow .18s ease, transform .18s ease; }
body.page-code-file .trust-grid > div:hover { box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), .10); transform: translateY(-1px); }
body.page-code-file .checkout-sidebar-header {
    background: var(--gradient-navy);
    padding: var(--space-4) var(--space-5);
    color: var(--text-inverse);
}
body.page-code-file .checkout-sidebar-body {
    padding: var(--space-5);
}
body.page-code-file .sidebar-price-box {
    text-align: center;
    padding: var(--space-2) 0 var(--space-1);
    position: relative;
}
body.page-code-file .sidebar-price-main {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extra);
    color: var(--navy-800);
    line-height: 1;
    letter-spacing: -1px;
}
body.page-code-file .sidebar-price-sub {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: var(--weight-medium);
    margin-top: var(--space-1);
}
body.page-code-file .sidebar-price-sub strong {
    color: var(--gray-700);
    font-weight: var(--weight-bold);
}
body.page-code-file .sidebar-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-3) 0 var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: #78350f;
    font-weight: var(--weight-semibold);
    flex-wrap: wrap;
}
body.page-code-file .sidebar-trust-strip .stars i {
    color: #f59e0b;
    font-size: var(--text-xs);
}
body.page-code-file .sidebar-trust-strip a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

body.page-code-file .sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-4) 0;
}
body.page-code-file .sidebar-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.page-code-file .sidebar-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--gray-700);
    line-height: var(--leading-snug);
}
body.page-code-file .sidebar-feature-list li i {
    color: var(--c-accent);
    font-size: var(--text-xs);
    margin-top: 3px;
    flex-shrink: 0;
}

body.page-code-file .order-summary-box {
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
}
body.page-code-file .order-summary-box .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--gray-600);
    padding: 3px 0;
}
body.page-code-file .order-summary-box .summary-total {
    border-top: 2px solid var(--border-color);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-md);
    font-weight: var(--weight-extra);
    color: var(--navy-800);
}
body.page-code-file .points-short-notice {
    background: #eef5ff;
    border: 1px dashed var(--c-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--text-xs);
    color: #78350f;
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: var(--leading-snug);
}
body.page-code-file .points-short-notice a {
    color: #b45309;
    font-weight: var(--weight-bold);
    text-decoration: underline;
}
body.page-code-file .sidebar-pay-btn {
    display: block;
    width: 100%;
    padding: 16px var(--space-4);
    background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-strong) 100%); /* live palette */
    color: var(--c-on-accent);
    border: none;
    border-radius: 999px; /* apple pill */
    font-weight: var(--weight-extra);
    min-height: 44px;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(var(--c-accent-rgb), .38), 0 2px 4px rgba(0, 0, 0, .12);
    transition: var(--transition-base);
    text-align: center;
    line-height: var(--leading-tight);
}
body.page-code-file .sidebar-pay-btn .pay-btn-main {
    display: block;
    font-size: var(--text-md);
    margin-bottom: 3px;
}
body.page-code-file .sidebar-pay-btn .pay-btn-main .pay-word { letter-spacing: 2px; }
body.page-code-file .sidebar-pay-btn .pay-btn-main .pay-card-ic { margin-left: 8px; }
body.page-code-file .sidebar-pay-btn .pay-btn-sub {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: inherit; /* readable on any accent */
    opacity: .82;
    letter-spacing: 0.2px;
}
body.page-code-file .sidebar-pay-btn .pay-btn-sub i {
    margin: 0 2px;
}
body.page-code-file .sidebar-pay-btn:hover {
    background: linear-gradient(180deg, var(--c-accent-soft) 0%, var(--c-accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(var(--c-accent-rgb), .48), 0 3px 6px rgba(0, 0, 0, .14);
}
body.page-code-file .sidebar-pay-btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}
/* single-method primary CTA (no card in this country) — split: brand mark | pay now + amount */
body.page-code-file .method-pay-btn {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 999px; /* matches .sidebar-pay-btn pill */
    overflow: hidden;
    cursor: pointer;
    min-height: 68px;
    background: linear-gradient(180deg, #00BAF2 0%, #012B72 100%);
    box-shadow: 0 14px 26px rgba(0, 186, 242, .38), 0 2px 4px rgba(0, 0, 0, .12);
    transition: var(--transition-base);
    text-align: left;
}
body.page-code-file .method-pay-btn .mpb-logo {
    flex: 0 0 40%; /* brand panel owns 40% of the button */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, .08);
    padding: 8px 12px;
}
body.page-code-file .method-pay-btn .mpb-logo img { max-width: 100%; max-height: 46px; width: auto; height: auto; display: block; }
body.page-code-file .method-pay-btn .mpb-logo i { color: #00BAF2; font-size: 30px; }
body.page-code-file .method-pay-btn .mpb-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px var(--space-3);
    color: #fff;
    min-width: 0;
}
body.page-code-file .method-pay-btn .mpb-main {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--weight-extra);
    line-height: var(--leading-tight);
    letter-spacing: .3px;
}
body.page-code-file .method-pay-btn .mpb-sub {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    opacity: .85;
    margin-top: 2px;
}
body.page-code-file .method-pay-btn .mpb-sub i { margin-right: 4px; }
/* scheme marks inside the PK pay button, under the amount — white glyphs, no panel (owner 2026-09-19) */
body.page-code-file .method-pay-btn:hover {
    background: linear-gradient(180deg, #22c9fb 0%, #0743a0 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(0, 186, 242, .48), 0 3px 6px rgba(0, 0, 0, .14);
}
body.page-code-file .method-pay-btn:focus-visible { outline: 3px solid #00BAF2; outline-offset: 2px; }
/* only 1-2 methods available -> tint them so the row unmistakably reads as a pressable button */
body.page-code-file .other-methods-list.few .other-method-btn {
    background: var(--c-tint-2);
    border: 2px solid var(--c-accent);
    min-height: 58px;
    padding: var(--space-4);
    box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), .18);
}
body.page-code-file .other-methods-list.few .other-method-btn::after {
    content: ""; /* css-drawn chevron — signals "press me", no icon-font dependency */
    width: 8px;
    height: 8px;
    border-right: 2.5px solid var(--c-accent);
    border-bottom: 2.5px solid var(--c-accent);
    transform: rotate(-45deg);
    margin-left: var(--space-2);
    flex-shrink: 0;
}
body.page-code-file .other-methods-list.few .other-method-btn:hover {
    background: var(--c-tint);
    border-color: var(--c-accent-strong);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--c-accent-rgb), .28);
}
body.page-code-file .other-methods-list.few .other-method-price {
    background: var(--white);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}
/* qr failed to load -> keep the box usable instead of a broken-image icon */
body.page-code-file .qr-fallback { display: none; font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; line-height: 1.5; word-break: break-all; }
body.page-code-file .qr-dead .qr-fallback { display: block; }
body.page-code-file .qr-dead img { display: none; }
/* key features — 2-col square tiles, compact */
body.page-code-file .cf-features { margin-top: 16px; padding: 16px; background: var(--c-card); border: 1px solid var(--c-tint-line); }
body.page-code-file .cf-features h3 { font-size: 15px; font-weight: 700; color: var(--c-primary); margin: 0 0 11px 0; display: flex; align-items: center; gap: 8px; }
body.page-code-file .cf-features h3 i { color: var(--c-accent); }
body.page-code-file .cf-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.page-code-file .cf-feat { display: flex; align-items: center; gap: 8px; min-height: 40px; background: var(--c-tint); border: 1px solid rgba(var(--c-accent-rgb), .18); color: var(--c-primary); padding: 8px 11px; font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; transition: background .18s, box-shadow .18s; }
body.page-code-file .cf-feat:hover { background: var(--c-tint-2); box-shadow: 0 3px 10px rgba(var(--c-primary-rgb), .08); }
body.page-code-file .cf-feat-ic { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; background: var(--c-accent); color: #fff; font-size: 10px; }
@media (max-width: 420px) {
    body.page-code-file .cf-feat { font-size: 11px; padding: 6px 8px; min-height: 32px; }
    body.page-code-file .cf-features { padding: 12px; }
    body.page-code-file .cf-features h3 { font-size: 14px; margin-bottom: 9px; }
}
/* long copy block — description / requirements / included / changelog / faq / item details (file_desc_lib.php) */
body.page-code-file .cf-desc { margin-top: 16px; padding: 18px; background: var(--c-card); border: 1px solid var(--c-tint-line); }
body.page-code-file .cf-desc-sec + .cf-desc-sec { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-tint-line); }
body.page-code-file .cf-desc-sec h3 { font-size: 15px; font-weight: 700; color: var(--c-primary); margin: 0 0 11px 0; display: flex; align-items: center; gap: 8px; }
body.page-code-file .cf-desc-sec h3 i { color: var(--c-accent); }
body.page-code-file .cf-desc-html { font-size: 14.5px; line-height: 1.7; color: var(--gray-700, #334155); overflow-wrap: anywhere; }
body.page-code-file .cf-desc-html p { margin: 0 0 12px; }
body.page-code-file .cf-desc-html h2, body.page-code-file .cf-desc-html h3, body.page-code-file .cf-desc-html h4 { color: var(--c-primary); margin: 18px 0 8px; line-height: 1.3; }
body.page-code-file .cf-desc-html h2 { font-size: 20px; }
body.page-code-file .cf-desc-html h3 { font-size: 17px; }
body.page-code-file .cf-desc-html h4 { font-size: 15px; }
body.page-code-file .cf-desc-html ul, body.page-code-file .cf-desc-html ol { margin: 0 0 12px; padding-left: 22px; }
body.page-code-file .cf-desc-html li { margin: 4px 0; }
body.page-code-file .cf-desc-html a { color: var(--c-accent); text-decoration: underline; }
body.page-code-file .cf-desc-html blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--c-accent); background: var(--c-tint); }
body.page-code-file .cf-desc-html code { background: var(--c-tint); padding: 1px 5px; font-size: 13px; }
body.page-code-file .cf-desc-html pre { background: var(--c-tint); padding: 12px; overflow-x: auto; font-size: 13px; margin: 0 0 12px; }
body.page-code-file .cf-desc-html pre code { background: none; padding: 0; }
body.page-code-file .cf-desc-html table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; }
body.page-code-file .cf-desc-html th, body.page-code-file .cf-desc-html td { padding: 8px 10px; border: 1px solid var(--c-tint-line); text-align: left; vertical-align: top; }
body.page-code-file .cf-desc-html th { background: var(--c-tint); color: var(--c-primary); }
body.page-code-file .cf-desc-html hr { border: 0; border-top: 1px solid var(--c-tint-line); margin: 16px 0; }
body.page-code-file .cf-desc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.page-code-file .cf-desc-list li { display: flex; align-items: flex-start; gap: 8px; background: var(--c-tint); border: 1px solid rgba(var(--c-accent-rgb), .18); color: var(--c-primary); padding: 8px 11px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
body.page-code-file .cf-desc-list li i { color: var(--c-accent); font-size: 12px; margin-top: 3px; flex-shrink: 0; }
body.page-code-file .cf-desc-qa { margin: 0; }
body.page-code-file .cf-desc-qa dt { font-weight: 700; color: var(--c-primary); font-size: 14.5px; margin: 0 0 4px; }
body.page-code-file .cf-desc-qa dd { margin: 0 0 14px; color: var(--gray-700, #475569); font-size: 14px; line-height: 1.65; }
body.page-code-file .cf-desc-qa dd:last-child { margin-bottom: 0; }
body.page-code-file .cf-desc-log-list { list-style: none; margin: 0; padding: 0; }
body.page-code-file .cf-desc-log-list li { padding: 8px 0; border-bottom: 1px dashed var(--c-tint-line); font-size: 14px; }
body.page-code-file .cf-desc-log-list li:last-child { border-bottom: 0; }
body.page-code-file .cf-desc-log-list p { margin: 4px 0 0; color: var(--gray-700, #475569); line-height: 1.6; }
body.page-code-file .cf-desc-ver { display: inline-block; background: var(--c-tint-2); color: var(--c-accent); font-size: 12px; font-weight: 700; padding: 2px 8px; margin-right: 8px; }
body.page-code-file .cf-desc-log-list time { color: var(--gray-500, #64748b); font-size: 13px; }
body.page-code-file .cf-details-table { margin-top: 0; }
body.page-code-file .cf-details-table td i { color: var(--c-accent); margin-right: 4px; width: 16px; text-align: center; }
body.page-code-file .cf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.page-code-file .cf-tag { background: var(--c-tint-2); color: var(--c-accent); padding: 2px 9px; font-size: 12px; font-weight: 600; }
@media (max-width: 600px) {
    body.page-code-file .cf-desc { padding: 14px 12px; }
    body.page-code-file .cf-desc-list { grid-template-columns: 1fr; }
}
body.page-code-file .sidebar-pay-btn:disabled,
body.page-code-file .sidebar-pay-btn.loading {
    opacity: 0.65;
    cursor: wait;
    animation: none;
}
body.page-code-file .sidebar-points-btn {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition-base);
    margin-bottom: var(--space-3);
}
body.page-code-file .sidebar-points-btn:hover {
    transform: translateY(-2px);
}
body.page-code-file .sidebar-points-btn:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}
body.page-code-file .other-methods-list {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
body.page-code-file .other-methods-heading {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
body.page-code-file .other-methods-heading i {
    color: var(--navy-500);
}
body.page-code-file .other-method-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 44px;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-body);
    text-decoration: none;
    transition: var(--transition-base);
    text-align: left;
    box-sizing: border-box;
}
body.page-code-file .other-method-btn:hover {
    border-color: var(--navy-500);
    background: var(--navy-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
body.page-code-file .other-method-btn:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}
body.page-code-file .other-method-btn > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}
body.page-code-file .other-method-btn > span:first-child i {
    font-size: var(--text-lg);
    width: 20px;
    text-align: center;
}
body.page-code-file .other-method-btn .other-method-price {
    font-weight: var(--weight-extra);
    color: var(--navy-800);
    font-size: var(--text-xs);
    background: var(--navy-50);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}
body.page-code-file .sidebar-payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
}
body.page-code-file .sidebar-payment-logos span {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-2xl);
    color: var(--gray-500);
}
body.page-code-file .sidebar-trust-bar {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: #f0fdf4;
    border-radius: var(--radius-sm);
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
body.page-code-file .sidebar-trust-bar span {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: #166534;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
body.page-code-file .sidebar-trust-bar span i {
    color: var(--color-success);
}
body.page-code-file .sidebar-trust-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.page-code-file .what-you-get-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-4);
}
body.page-code-file .what-you-get-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
}
body.page-code-file .what-you-get-table td:first-child {
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}
body.page-code-file .what-you-get-table tr:last-child td {
    border-bottom: none;
}
body.page-code-file .method-verification-notice {
    background: #eef5ff;
    border: 1px solid #cfe2ff;
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--text-xs);
    color: #78350f;
    line-height: var(--leading-snug);
    margin-top: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
body.page-code-file .method-verification-notice i {
    color: #b45309;
    margin-top: 2px;
    flex-shrink: 0;
}
body.page-code-file .crypto-wallet-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
body.page-code-file .crypto-wallet-opt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-base);
    background: var(--white);
}
body.page-code-file .crypto-wallet-opt:hover {
    border-color: #f7931a;
    background: #fff7ed;
}
body.page-code-file .crypto-wallet-opt input {
    accent-color: #f7931a;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
body.page-code-file .crypto-wallet-opt.active {
    border-color: #f7931a;
    background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
}
body.page-code-file .crypto-wallet-opt-name {
    font-weight: var(--weight-bold);
    color: var(--text-body);
    font-size: var(--text-sm);
}
body.page-code-file .crypto-wallet-opt-chain {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}
body.page-code-file .crypto-selected-addr {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
}
body.page-code-file .crypto-selected-addr-label {
    font-size: 10px;
    color: #9a3412;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}
body.page-code-file .crypto-selected-addr-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family-mono);
    font-size: var(--text-xs);
    color: var(--navy-800);
    word-break: break-all;
    overflow-wrap: anywhere;
    font-weight: var(--weight-semibold);
}
body.page-code-file #selectedCryptoAddr {
    word-break: break-all;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* --- CHUNK 15: Payment modals — Paytm --- */
body.page-code-file .paytm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: var(--z-modal);
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4);
    overflow-y: auto;
}
body.page-code-file .paytm-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 920px;
    box-shadow: var(--shadow-xl);
    position: relative;
    margin: 28px auto var(--space-8);
}
body.page-code-file .paytm-header {
    background: linear-gradient(135deg, #00BAF2, #0078D4);
    padding: var(--space-4) var(--space-5);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.page-code-file .paytm-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
}
body.page-code-file .paytm-left {
    padding: var(--space-5);
    border-right: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body.page-code-file .paytm-left img {
    max-width: 180px;
}
body.page-code-file .paytm-right {
    padding: var(--space-5);
    overflow-y: auto;
    max-height: 75vh;
}

/* --- CHUNK 15: Payment modals — Binance --- */
body.page-code-file .binance-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: var(--z-modal);
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4);
    overflow-y: auto;
}
body.page-code-file .binance-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 920px;
    box-shadow: var(--shadow-xl);
    position: relative;
    margin: 28px auto var(--space-8);
}
body.page-code-file .binance-header {
    background: linear-gradient(135deg, #F3BA2F, #FCD535);
    padding: var(--space-4) var(--space-5);
    color: #14151A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.page-code-file .binance-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
}
body.page-code-file .binance-left {
    padding: var(--space-5);
    border-right: 1px solid var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body.page-code-file .binance-left img {
    max-width: 180px;
}
body.page-code-file .binance-right {
    padding: var(--space-5);
    overflow-y: auto;
    max-height: 75vh;
}

body.page-code-file .binance-pay-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #14151A;
    color: #F3BA2F;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-decoration: none;
    transition: var(--transition-base);
}
body.page-code-file .binance-pay-link:hover {
    background: #2B2F36;
    transform: translateY(-1px);
}

/* --- CHUNK 15: Payment modals — Crypto --- */
body.page-code-file .crypto-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: var(--z-modal);
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-4);
    overflow-y: auto;
}
body.page-code-file .crypto-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 92%;
    max-width: 920px;
    box-shadow: var(--shadow-xl);
    position: relative;
    margin: 28px auto var(--space-8);
}
body.page-code-file .crypto-header {
    background: linear-gradient(135deg, #f7931a, #e2761b);
    padding: var(--space-4) var(--space-5);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.page-code-file .crypto-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
}
body.page-code-file .crypto-left {
    padding: var(--space-5);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    max-height: 75vh;
}
body.page-code-file .crypto-right {
    padding: var(--space-5);
    overflow-y: auto;
    max-height: 75vh;
}
body.page-code-file .crypto-wallet {
    background: var(--surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

body.page-code-file .crypto-copy-btn {
    background: var(--navy-50);
    border: none;
    color: var(--navy-500);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-xs);
    flex-shrink: 0;
}
body.page-code-file .crypto-copy-btn:hover {
    background: var(--navy-100);
}
body.page-code-file .crypto-copy-btn:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}

/* --- CHUNK 16: Community popup --- */
body.page-code-file .community-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-toast);
    animation: cf-fadeIn 0.3s ease;
}
body.page-code-file .community-popup {
    background: linear-gradient(135deg, var(--white) 0%, var(--surface-subtle) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    max-width: 450px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    position: relative;
    text-align: center;
    animation: cf-slideUp 0.4s ease;
    border: 2px solid var(--border-color);
}
body.page-code-file .community-popup-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    background: none;
    border: none;
    font-size: var(--text-3xl);
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}
body.page-code-file .community-popup-close:hover {
    background: var(--gray-100);
    color: var(--gray-600);
    transform: rotate(90deg);
}
body.page-code-file .community-popup-close:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}
body.page-code-file .community-popup-icon {
    font-size: 64px;
    margin-bottom: var(--space-5);
    animation: cf-bounce 1s infinite;
}
body.page-code-file .community-popup-title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--text-body);
    margin-bottom: var(--space-4);
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
body.page-code-file .community-popup-message {
    font-size: var(--text-md);
    color: var(--gray-600);
    margin-bottom: var(--space-5);
    line-height: var(--leading-normal);
}
body.page-code-file .community-popup-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--gray-100);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--gray-500);
    border: 1px solid var(--border-color);
}
body.page-code-file .community-popup-privacy svg {
    flex-shrink: 0;
    color: var(--navy-500);
}
body.page-code-file .community-popup-button {
    display: inline-block;
    background: var(--gradient-accent);
    color: var(--text-inverse);
    text-decoration: none;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    min-height: 44px;
    transition: var(--transition-base);
    box-shadow: 0 4px 15px rgba(var(--c-accent-rgb), 0.3);
}
body.page-code-file .community-popup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--c-accent-rgb), 0.4);
}
body.page-code-file .community-popup-button:active {
    transform: translateY(0);
}
body.page-code-file .community-popup-button:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}

/* --- CHUNK 16: Recent-upload popup --- */
body.page-code-file .recent-upload-popup * {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}
body.page-code-file .recent-upload-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    backdrop-filter: blur(8px);
    padding: var(--space-4);
    box-sizing: border-box;
    overflow-y: auto;
}
body.page-code-file .recent-upload-popup.show {
    display: flex;
    animation: cf-fadeIn 0.3s ease;
}
body.page-code-file .recent-upload-popup-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-xl);
    animation: cf-slideUp 0.35s ease;
    margin: auto;
}
body.page-code-file .recent-popup-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: rgba(0, 0, 0, 0.75);
    border: none;
    color: var(--text-inverse);
    font-size: var(--text-2xl);
    width: 38px;
    height: 38px;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--radius-full);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: var(--z-base);
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
body.page-code-file .recent-popup-close:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: rotate(90deg);
}
body.page-code-file .recent-popup-close:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}
body.page-code-file .recent-popup-header {
    background: var(--gradient-accent);
    color: var(--text-inverse);
    padding: var(--space-12) var(--space-5) var(--space-5);
    text-align: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
body.page-code-file .recent-popup-header h3 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-3) 0;
    line-height: var(--leading-tight);
}
body.page-code-file .recent-popup-header p {
    font-size: var(--text-md);
    margin: 0;
    opacity: 0.95;
    line-height: var(--leading-snug);
}
body.page-code-file .recent-popup-video {
    padding: var(--space-5);
    background: var(--surface-subtle);
}
body.page-code-file .recent-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
body.page-code-file .recent-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
body.page-code-file .recent-popup-footer {
    padding: var(--space-5);
    text-align: center;
}
body.page-code-file .recent-popup-footer h4 {
    font-size: var(--text-lg);
    color: var(--navy-800);
    margin: 0 0 var(--space-3) 0;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    padding: 0 var(--space-3);
}
body.page-code-file .free-prominent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* --c-on-accent is computed against the ACCENT alone (theme_helper _themeInk), so a surface
       that faded accent -> secondary had one ink trying to serve two different lightnesses —
       on the amber themes the far end went dark and swallowed the label. the sheen now stays
       INSIDE the accent, +/-10%, so the guaranteed-contrast ink holds right across the button */
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%), var(--c-accent);
    color: var(--c-on-accent);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 15px rgba(var(--c-accent-rgb), 0.3);
    animation: cf-pulseGlow 2s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-base);
    min-height: 44px;
    touch-action: manipulation;
}
body.page-code-file .free-prominent:hover,
body.page-code-file .free-prominent:active {
    background: linear-gradient(135deg, var(--c-accent-strong) 0%, var(--c-primary) 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--c-accent-rgb), 0.42);
}
body.page-code-file .free-prominent:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}
body.page-code-file .recent-popup-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}
body.page-code-file .btn-watch-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
    background: var(--gradient-accent);
    color: var(--text-inverse);
    min-height: 44px;
    touch-action: manipulation;
}
body.page-code-file .btn-watch-now:hover,
body.page-code-file .btn-watch-now:active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), 0.4);
}
body.page-code-file .btn-watch-now:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}

/* --- CHUNK 18: Watch-to-unlock gate (#videoWatchSection) — animated, theme-tokened --- */
body.page-code-file .cf-wg {
    position: relative;
    background: transparent; /* card face is painted by ::after, over the spinning rim */
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    margin: var(--space-5) 0 var(--space-8);
    box-sizing: border-box;
    box-shadow: 0 10px 34px rgba(var(--c-accent-rgb), 0.16);
    animation: cf-wg-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-code-file .cf-wg::before {
    content: '';
    position: absolute;
    inset: -2px;
    --cf-wg-ang: 0deg; /* static rim fallback if @property unsupported */
    border-radius: calc(var(--radius-lg) + 2px);
    background: conic-gradient(from var(--cf-wg-ang), var(--c-accent), var(--c-primary), var(--c-accent-soft), var(--c-accent));
    animation: cf-wg-spin 7s linear infinite;
}
body.page-code-file .cf-wg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
}
body.page-code-file .cf-wg > * { position: relative; z-index: 1; }

body.page-code-file .cf-wg-head { text-align: center; margin-bottom: var(--space-5); }
body.page-code-file .cf-wg-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary) 100%);
    color: var(--c-on-accent);
    font-size: 26px;
    box-shadow: 0 6px 20px rgba(var(--c-accent-rgb), 0.38);
    animation: cf-wg-bob 2.8s ease-in-out infinite;
}
/* two halo rings breathing outward */
body.page-code-file .cf-wg-badge::before,
body.page-code-file .cf-wg-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    border: 2px solid var(--c-accent);
    animation: cf-wg-ring 2.6s ease-out infinite;
}
body.page-code-file .cf-wg-badge::after { animation-delay: 1.3s; }
body.page-code-file .cf-wg-title {
    font-size: clamp(var(--text-md), 2.2vw, 21px);
    font-weight: var(--weight-bold);
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
    line-height: var(--leading-snug);
}
body.page-code-file .cf-wg-sub { color: var(--c-text-muted); font-size: var(--text-base); margin: 0; }
body.page-code-file .cf-wg-goal {
    color: var(--c-accent-strong);
    font-weight: var(--weight-bold);
    animation: cf-wg-throb 2s ease-in-out infinite;
    display: inline-block;
}

body.page-code-file .cf-wg-loot {
    background: var(--c-tint);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
body.page-code-file .cf-wg-loot-head {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--c-primary);
    margin: 0 0 var(--space-2);
}
body.page-code-file .cf-wg-loot-head i { color: var(--c-accent); margin-right: 6px; }
body.page-code-file .cf-wg-loot-list { list-style: none; margin: 0; padding: 0; }
body.page-code-file .cf-wg-loot-list li {
    font-size: var(--text-xs);
    color: #475569;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: cf-wg-slide 0.5s ease both;
}
body.page-code-file .cf-wg-loot-list li:nth-child(1) { animation-delay: 0.15s; }
body.page-code-file .cf-wg-loot-list li:nth-child(2) { animation-delay: 0.28s; }
body.page-code-file .cf-wg-loot-list li:nth-child(3) { animation-delay: 0.41s; }
body.page-code-file .cf-ic-php { color: #7b61ff; }
body.page-code-file .cf-ic-accent { color: var(--c-accent); }
body.page-code-file .cf-ic-green { color: var(--c-primary); }
body.page-code-file .cf-ic-blue { color: #3b82f6; }

body.page-code-file .cf-wg-track {
    position: relative;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--c-tint-2);
    box-shadow: inset 0 2px 6px rgba(var(--c-primary-rgb), 0.12);
    overflow: hidden;
    margin-bottom: var(--space-5);
}
body.page-code-file .cf-wg-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-strong) 100%);
    transition: width 0.5s cubic-bezier(0.25, 0.8, 0.3, 1);
}
/* barber-pole stripes travelling along the fill */
body.page-code-file .cf-wg-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,0.24) 0 11px, transparent 11px 22px);
    background-size: 22px 100%;
    animation: cf-wg-stripes 0.85s linear infinite;
}
/* glowing head at the leading edge */
body.page-code-file .cf-wg-fill::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    right: -6px;
    width: 22px;
    opacity: 0; /* no stray blob at 0% — JS adds .has-progress on first tick */
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%);
    animation: cf-wg-throb 1.2s ease-in-out infinite;
}
body.page-code-file .cf-wg-fill.has-progress::after { opacity: 1; }
body.page-code-file .cf-wg-tick {
    position: absolute;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: rgba(var(--c-primary-rgb), 0.16);
}
body.page-code-file .cf-wg-tick:nth-of-type(1) { left: 25%; }
body.page-code-file .cf-wg-tick:nth-of-type(2) { left: 50%; }
body.page-code-file .cf-wg-tick:nth-of-type(3) { left: 75%; }
body.page-code-file .cf-wg-pct {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--c-primary);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

body.page-code-file .cf-wg-cta { text-align: center; }
body.page-code-file .cf-wg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 17px 38px;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ff3b30 0%, #b91c1c 100%);
    color: #fff;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    cursor: pointer;
    min-height: 52px;
    max-width: 100%;
    overflow: hidden;
    touch-action: manipulation;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.42);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: cf-wg-callout 2.1s ease-in-out infinite;
}
/* light sweeping across the button */
body.page-code-file .cf-wg-btn::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
    animation: cf-wg-sheen 2.8s ease-in-out infinite;
}
body.page-code-file .cf-wg-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(220, 38, 38, 0.55);
}
body.page-code-file .cf-wg-btn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
body.page-code-file .cf-wg-btn-ic { font-size: 22px; display: inline-flex; animation: cf-wg-bob 1.8s ease-in-out infinite; }
body.page-code-file .cf-wg-btn.is-wait,
body.page-code-file .cf-wg-btn:disabled {
    animation: none;
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}
body.page-code-file .cf-wg-btn.is-wait { cursor: wait; }
body.page-code-file .cf-wg-btn.is-wait::after,
body.page-code-file .cf-wg-btn:disabled::after { display: none; }
body.page-code-file .cf-wg-btn.is-wait:hover,
body.page-code-file .cf-wg-btn:disabled:hover { transform: none; }

body.page-code-file .cf-wg-status { display: none; margin-top: var(--space-4); text-align: center; }
body.page-code-file .cf-wg-status.show { display: block; animation: cf-wg-slide 0.4s ease both; }
body.page-code-file .cf-wg-status p { margin: 0; font-weight: var(--weight-semibold); }
body.page-code-file .cf-wg-status-live { color: var(--c-accent-strong); }
body.page-code-file .cf-wg-status-ok { color: var(--cf-ok); font-size: var(--text-md); font-weight: var(--weight-bold); }

/* live: video is playing and being tracked */
body.page-code-file .cf-wg.is-live { box-shadow: 0 12px 40px rgba(var(--c-accent-rgb), 0.28); }
/* done: unlocked — halo freezes green, padlock springs open */
body.page-code-file .cf-wg.is-done { animation: cf-wg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
body.page-code-file .cf-wg.is-done::before { background: var(--cf-ok); animation: none; }
body.page-code-file .cf-wg.is-done .cf-wg-badge {
    background: linear-gradient(135deg, var(--cf-ok) 0%, var(--cf-ok-deep) 100%);
    box-shadow: 0 6px 20px rgba(var(--cf-ok-rgb), 0.35);
    animation: cf-wg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.page-code-file .cf-wg.is-done .cf-wg-badge::before,
body.page-code-file .cf-wg.is-done .cf-wg-badge::after { border-color: var(--cf-ok); animation: none; opacity: 0; }
body.page-code-file .cf-wg.is-done .cf-wg-fill { background: linear-gradient(90deg, var(--cf-ok), var(--cf-ok-deep)); }
body.page-code-file .cf-wg.is-done .cf-wg-fill::before { animation: none; }

@media (max-width: 600px) {
    body.page-code-file .cf-wg { padding: var(--space-6) var(--space-4); }
    body.page-code-file .cf-wg-badge { width: 56px; height: 56px; font-size: 22px; }
    body.page-code-file .cf-wg-btn { padding: 15px 22px; font-size: var(--text-base); width: 100%; }
    body.page-code-file .cf-wg-track { height: 30px; }
}
/* motion-sensitive users: keep the layout, drop the movement */
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .cf-wg,
    body.page-code-file .cf-wg::before,
    body.page-code-file .cf-wg-badge,
    body.page-code-file .cf-wg-badge::before,
    body.page-code-file .cf-wg-badge::after,
    body.page-code-file .cf-wg-goal,
    body.page-code-file .cf-wg-loot-list li,
    body.page-code-file .cf-wg-fill::before,
    body.page-code-file .cf-wg-fill::after,
    body.page-code-file .cf-wg-btn,
    body.page-code-file .cf-wg-btn::after,
    body.page-code-file .cf-wg-btn-ic,
    body.page-code-file .cf-wg-status.show { animation: none; }
}

/* --- Subscribe & unlock card (#youtubeAuthSection) — the ask on the left, the payoff on the right.
   Replaces the centered stack that buried the deliverables in 11px fine print. --- */
body.page-code-file .cf-auth { display: grid; gap: var(--space-6); }
@media (min-width: 940px) {
    body.page-code-file .cf-auth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "head get" "act get";
        gap: var(--space-6) var(--space-10);
        align-items: start;
    }
    body.page-code-file .cf-auth-head { grid-area: head; }
    body.page-code-file .cf-auth-get { grid-area: get; }
    body.page-code-file .cf-auth-act { grid-area: act; }
}
/* file-type mark — anchors the column instead of floating over a centred stack */
body.page-code-file .cf-auth-mark {
    display: flex;  /* block-level so the eyebrow drops to its own line */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    /* --c-on-accent is computed against the ACCENT alone (theme_helper _themeInk), so a surface
       that faded accent -> secondary had one ink trying to serve two different lightnesses —
       on the amber themes the far end went dark and swallowed the label. the sheen now stays
       INSIDE the accent, +/-10%, so the guaranteed-contrast ink holds right across the button */
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%), var(--c-accent);
    color: var(--c-on-accent);
    font-size: 22px;
    margin-bottom: var(--space-4);
}
body.page-code-file .cf-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: var(--space-2);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent);
}
body.page-code-file .cf-auth-title {
    margin: 0 0 var(--space-3);
    font-size: clamp(21px, 2.3vw, 27px);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--c-primary);
}
body.page-code-file .cf-auth-sub {
    margin: 0;
    max-width: 46ch;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--c-text-muted);
}
body.page-code-file .cf-auth-sub strong { color: var(--c-primary); font-weight: var(--weight-semibold); }

/* the payoff manifest — what actually lands on your machine */
body.page-code-file .cf-auth-get {
    background: var(--c-tint);
    border: 1px solid var(--c-tint-line);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}
body.page-code-file .cf-auth-get-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-2);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-primary);
}
body.page-code-file .cf-auth-get-head i { color: var(--c-accent); font-size: 13px; }
body.page-code-file .cf-auth-list { list-style: none; margin: 0; padding: 0; }
body.page-code-file .cf-auth-list li {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
}
body.page-code-file .cf-auth-list li + li { border-top: 1px solid var(--c-tint-line); }
body.page-code-file .cf-auth-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--c-card);
    border: 1px solid var(--c-tint-line);
    font-size: 16px;
    color: var(--c-accent);
}
body.page-code-file .cf-auth-ic-php { color: #7b61ff; }
body.page-code-file .cf-auth-ic-alt { color: var(--c-primary); }
body.page-code-file .cf-auth-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.page-code-file .cf-auth-txt strong { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--c-primary); }
body.page-code-file .cf-auth-txt span { font-size: var(--text-xs); color: var(--c-text-muted); }

/* action column */
body.page-code-file .cf-auth-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; }
body.page-code-file .cf-auth-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    max-width: 480px;
    min-height: 54px;
    padding: 16px var(--space-8);
    border: 0;
    border-radius: var(--radius-pill);
    /* --c-on-accent is computed against the ACCENT alone (theme_helper _themeInk), so a surface
       that faded accent -> secondary had one ink trying to serve two different lightnesses —
       on the amber themes the far end went dark and swallowed the label. the sheen now stays
       INSIDE the accent, +/-10%, so the guaranteed-contrast ink holds right across the button */
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.10) 100%), var(--c-accent);
    color: var(--c-on-accent);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(var(--c-accent-rgb), .3);
    transition: transform .2s ease, box-shadow .2s ease;
}
/* the alert bar's Verify Now — was an inline style whose hover swapped the background to
   --c-accent-strong but LEFT the ink alone, so on a light-accent theme the label lost its
   contrast the moment you pointed at it. hover now darkens the accent under the SAME ink the
   theme guaranteed against it, which is the one shade the label is known to survive */
body.page-code-file .cf-verify-now {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    border-radius: 14px;
    font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background var(--duration-fast, .2s) ease, box-shadow var(--duration-fast, .2s) ease;
}
body.page-code-file .cf-verify-now:hover {
    background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)), var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: 0 4px 14px rgba(var(--c-accent-rgb), .32);
}
body.page-code-file .cf-verify-now:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
body.page-code-file .cf-auth-cta i { font-size: 20px; }
body.page-code-file .cf-auth-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--c-accent-rgb), .42); }
body.page-code-file .cf-auth-cta:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
/* set by the watch-video flow to point at the next step */
body.page-code-file .is-highlight { animation: cf-auth-cue 1.9s ease-in-out infinite; }
body.page-code-file .cf-auth-note { margin: 0; font-size: var(--text-sm); color: var(--c-text-muted); }
body.page-code-file .cf-auth-note a { color: var(--c-accent); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 2px; }
body.page-code-file .cf-auth-note a:hover { color: var(--c-accent-strong); }
body.page-code-file .cf-auth-demo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--c-tint-line);
    border-radius: var(--radius-pill);
    background: var(--c-card);
    color: var(--c-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
body.page-code-file .cf-auth-demo:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-2px); }
body.page-code-file .cf-auth-demo-note { margin: 0; font-size: var(--text-xs); color: var(--c-text-muted); }
@media (max-width: 600px) {
    body.page-code-file .cf-auth-get { padding: var(--space-4); }
    body.page-code-file .cf-auth-ic { width: 34px; height: 34px; font-size: 15px; }
    body.page-code-file .cf-auth-cta { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .cf-auth-cta,
    body.page-code-file .is-highlight,
    body.page-code-file .cf-auth-demo { animation: none; transition: none; }
}

/* language pill — permanent "you can translate this" cue, these two pages only.
   Pseudo-elements are ordered so the caret still comes last. */
body.page-code-file .lang-btn { border-color: var(--c-accent); background: var(--c-tint); }
body.page-code-file .lang-btn::before {
    content: '';
    order: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: rsLangPulse 2.4s ease-out infinite;
}
body.page-code-file .lang-btn::after {
    content: 'Translate';
    order: 2;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--c-accent);
}
body.page-code-file .lang-btn .lang-caret { order: 3; }
@media (max-width: 480px) {
    body.page-code-file .lang-btn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .lang-btn::before { animation: none; }
}

/* --- CHUNK 17: New-upload strip above the header (replaces the recent-upload popup on code_file) --- */
body.page-code-file .ru-bar {
    display: none;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%);
    color: var(--c-on-primary);
    border-bottom: 2px solid var(--c-accent);
}
body.page-code-file .ru-bar.show { display: block; }
body.page-code-file .ru-bar-in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-family-base);
}
body.page-code-file .ru-bar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: var(--c-accent);
    color: var(--c-on-accent);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
body.page-code-file .ru-bar-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-code-file .ru-bar-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-code-file .ru-bar-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c-accent);
    color: var(--c-on-accent);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: var(--weight-bold);
    white-space: nowrap;
    min-height: 36px;
    touch-action: manipulation;
    animation: ru-blink 1.4s ease-in-out infinite;
}
body.page-code-file .ru-bar-btn:hover,
body.page-code-file .ru-bar-btn:active {
    animation: none;
    background: var(--c-accent-strong);
    transform: translateY(-1px);
}
body.page-code-file .ru-bar-btn:focus-visible {
    outline: 3px solid var(--c-on-primary);
    outline-offset: 2px;
}
body.page-code-file .ru-bar-x {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    touch-action: manipulation;
}
body.page-code-file .ru-bar-x:hover { color: var(--c-on-primary); }
@media (prefers-reduced-motion: reduce) {
    body.page-code-file .ru-bar-btn { animation: none; }
}
@media (max-width: 768px) {
    body.page-code-file .ru-bar-note { display: none; }
    body.page-code-file .ru-bar-in { padding: 8px 14px; gap: var(--space-2); }
    body.page-code-file .ru-bar-name { flex: 1 1 auto; font-size: 13px; }
}
@media (max-width: 480px) {
    body.page-code-file .ru-bar-tag { display: none; }
    body.page-code-file .ru-bar-name { font-size: 12px; }
    body.page-code-file .ru-bar-btn { padding: 7px 13px; font-size: 12px; }
}

/* ===========================================================
   Responsive — code_file.php (scoped, every selector prefixed)
   =========================================================== */

@media (max-width: 992px) {
    
    body.page-code-file .content-section {
        padding: var(--space-6) var(--space-5);
    }
    body.page-code-file .container {
        padding: var(--space-8) var(--space-4);
    }
}

@media (max-width: 768px) {
    body.page-code-file .public-header {
        padding: var(--space-3) var(--space-4);
    }
    body.page-code-file .public-header-brand h2 {
        font-size: var(--text-lg);
    }
    body.page-code-file .public-header-actions .browse-btn,
    body.page-code-file .public-header-actions .whatsapp-header-btn {
        display: none;
    }
    body.page-code-file .container {
        padding: var(--space-5) var(--space-4);
    }
    body.page-code-file .file-header {
        padding: var(--space-5) var(--space-4);
        margin-bottom: var(--space-5);
    }
    body.page-code-file .file-header h1 {
        margin-bottom: var(--space-3);
    }
    body.page-code-file .file-meta {
        gap: var(--space-2);
    }
    body.page-code-file .badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
    }
    body.page-code-file .video-container {
        margin-bottom: var(--space-5);
    }
    body.page-code-file .content-section {
        padding: var(--space-5) var(--space-4);
        margin-bottom: var(--space-5);
    }
    body.page-code-file .btn-primary {
        padding: var(--space-3) var(--space-5);
    }
    body.page-code-file .step {
        padding: var(--space-4);
        margin-bottom: var(--space-5);
    }
    body.page-code-file .step-number {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: var(--text-base);
        margin-right: var(--space-3);
    }
    body.page-code-file .step-title {
        font-size: var(--text-md);
    }
    body.page-code-file .step-content {
        margin-left: 0;
        margin-top: var(--space-3);
        font-size: var(--text-base);
    }
    body.page-code-file .details-box {
        padding: var(--space-4);
        font-size: var(--text-sm);
    }
    body.page-code-file .details-box strong {
        font-size: var(--text-sm);
    }
    
    body.page-code-file .video-card {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }
    body.page-code-file .tip-box,
    body.page-code-file .warning-box {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
    body.page-code-file .tip-box .icon,
    body.page-code-file .warning-box .icon {
        font-size: var(--text-xl);
    }
    body.page-code-file .subscribers-milestone-banner {
        padding: var(--space-3) var(--space-4);
    }
    body.page-code-file .milestone-content {
        flex-direction: row;
        gap: var(--space-3);
    }
    body.page-code-file .milestone-text {
        flex-direction: row;
        gap: var(--space-2);
        align-items: center;
    }
    body.page-code-file .milestone-emoji {
        font-size: 20px;
        width: 44px;
        height: 44px;
        animation: none;
    }
    body.page-code-file .milestone-message {
        text-align: left;
    }
    body.page-code-file .milestone-main {
        font-size: var(--text-sm);
        margin-bottom: 2px;
    }
    body.page-code-file .milestone-sub {
        font-size: var(--text-xs);
    }
    body.page-code-file .subscribe-btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        white-space: nowrap;
        flex-shrink: 0;
    }
    body.page-code-file .subscribe-btn svg {
        width: 16px;
        height: 16px;
        margin-right: var(--space-1);
    }
    body.page-code-file .vip-membership-banner {
        padding: var(--space-5);
    }
    body.page-code-file .vip-banner-content {
        flex-direction: column;
        text-align: center;
    }
    body.page-code-file .vip-banner-left {
        flex-direction: column;
    }
    body.page-code-file .vip-banner-trust {
        justify-content: center;
        flex-wrap: wrap;
    }
    body.page-code-file .trust-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-2) !important;
    }
    body.page-code-file .customize-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }

    body.page-code-file div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    body.page-code-file .checkout-grid {
        grid-template-columns: 1fr;
    }
    body.page-code-file .checkout-right {
        position: static;
    }
    body.page-code-file .sidebar-price-main {
        font-size: var(--text-3xl);
    }
    body.page-code-file .checkout-sidebar-body {
        padding: var(--space-4);
    }
    
    body.page-code-file .file-prompt-section {
        padding: var(--space-4);
    }
    body.page-code-file .paytm-box,
    body.page-code-file .binance-box,
    body.page-code-file .crypto-box {
        width: 95%;
        margin: 10px auto 20px;
    }
    body.page-code-file .paytm-grid,
    body.page-code-file .binance-grid,
    body.page-code-file .crypto-grid {
        grid-template-columns: 1fr;
    }
    body.page-code-file .paytm-left,
    body.page-code-file .binance-left {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: var(--space-4);
    }
    body.page-code-file .paytm-left img,
    body.page-code-file .binance-left img {
        max-width: 160px;
    }
    body.page-code-file .paytm-right,
    body.page-code-file .binance-right {
        padding: var(--space-4);
        max-height: none;
    }
    body.page-code-file .crypto-left {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: none;
    }
    body.page-code-file .crypto-right {
        max-height: none;
    }
    body.page-code-file .recent-upload-popup {
        padding: var(--space-3);
    }
    body.page-code-file .recent-upload-popup-content {
        max-height: 94vh;
        max-width: 95%;
    }
    body.page-code-file .recent-popup-header {
        padding: 48px var(--space-4) var(--space-4);
    }
    body.page-code-file .recent-popup-header h3 {
        font-size: var(--text-xl);
    }
    body.page-code-file .recent-popup-header p {
        font-size: var(--text-base);
    }
    body.page-code-file .recent-popup-video {
        padding: var(--space-4);
    }
    body.page-code-file .recent-popup-footer {
        padding: var(--space-4);
    }
    body.page-code-file .recent-popup-footer h4 {
        font-size: var(--text-md);
        margin: 0 0 var(--space-3) 0;
    }
    body.page-code-file .free-prominent {
        font-size: var(--text-md);
        padding: var(--space-3) var(--space-6);
        margin-bottom: var(--space-3);
    }
    body.page-code-file .recent-popup-buttons {
        width: 100%;
    }
    body.page-code-file .btn-watch-now {
        width: 100%;
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-md);
    }
    body.page-code-file .recent-popup-close {
        width: 40px;
        height: 40px;
        font-size: var(--text-2xl);
        top: var(--space-3);
        right: var(--space-3);
    }
}

@media (max-width: 640px) {

    body.page-code-file .auth-section {
        padding: var(--space-4) !important;
    }
    
    body.page-code-file #watchProgress {
        padding: var(--space-4) !important;
    }
    body.page-code-file #watchProgress p {
        font-size: var(--text-base) !important;
    }
    body.page-code-file #downloadSection {
        padding: var(--space-4) !important;
    }
    body.page-code-file #verifiedDownloadBtn {
        font-size: var(--text-base) !important;
        padding: var(--space-3) !important;
    }
}

@media (max-width: 600px) {
    /* recovered: mobile override for inline-gradient divs */
    body.page-code-file div[style*="background: linear-gradient"] {
        padding: 15px !important;
        margin-bottom: 15px !important;
        border-radius: var(--radius-sm) !important;
    }
    
    body.page-code-file .public-header {
        padding: var(--space-3);
    }
    body.page-code-file .public-header-brand h2 {
        font-size: var(--text-md);
    }
    body.page-code-file .container {
        padding: var(--space-4) var(--space-3);
    }
    body.page-code-file .file-header {
        padding: var(--space-4) var(--space-3);
        margin-bottom: var(--space-4);
    }
    body.page-code-file .file-meta {
        gap: var(--space-1);
        justify-content: center;
    }
    body.page-code-file .badge {
        padding: var(--space-1) var(--space-3);
        font-size: 10px;
    }
    body.page-code-file .video-container {
        margin-bottom: var(--space-4);
    }
    body.page-code-file .btn-primary,
    body.page-code-file .btn-whatsapp {
        padding: var(--space-4) var(--space-5) !important;
        font-size: var(--text-base) !important;
        min-height: 48px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: var(--space-2) 0 !important;
    }
    body.page-code-file .details-box {
        padding: var(--space-4) !important;
        font-size: var(--text-xs) !important;
        line-height: var(--leading-normal) !important;
    }

    body.page-code-file .trust-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-2) !important;
    }
    body.page-code-file .customize-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-3) !important;
    }
    body.page-code-file .content-section {
        padding: var(--space-4) var(--space-3) !important;
        margin-bottom: var(--space-4) !important;
    }
    body.page-code-file .section-title {
        margin-bottom: var(--space-3) !important;
        padding-bottom: var(--space-3) !important;
    }

    body.page-code-file .community-popup {
        padding: var(--space-8) var(--space-6);
    }
    body.page-code-file .community-popup-title {
        font-size: var(--text-2xl);
    }
    body.page-code-file .community-popup-message {
        font-size: var(--text-md);
    }
    body.page-code-file .community-popup-privacy {
        font-size: var(--text-xs);
        padding: var(--space-3);
    }
    body.page-code-file .recent-upload-popup {
        padding: var(--space-2);
        align-items: flex-start;
        padding-top: var(--space-5);
    }
    body.page-code-file .recent-upload-popup-content {
        max-width: 100%;
        max-height: 96vh;
    }
    body.page-code-file .recent-popup-header {
        padding: 45px var(--space-4) var(--space-4);
    }
    body.page-code-file .recent-popup-header h3 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }
    body.page-code-file .recent-popup-header p {
        font-size: var(--text-sm);
    }
    body.page-code-file .recent-popup-video {
        padding: var(--space-3);
    }
    body.page-code-file .recent-popup-footer {
        padding: var(--space-3) var(--space-4);
    }
    body.page-code-file .recent-popup-footer h4 {
        font-size: var(--text-md);
        margin: 0 0 var(--space-3) 0;
        padding: 0 var(--space-1);
    }
    body.page-code-file .free-prominent {
        font-size: var(--text-base);
        padding: var(--space-2) var(--space-5);
        margin-bottom: var(--space-3);
        letter-spacing: 0.3px;
    }
    body.page-code-file .btn-watch-now {
        width: 100%;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-md);
        min-height: 48px;
    }
    body.page-code-file .recent-popup-close {
        width: 38px;
        height: 38px;
        font-size: var(--text-xl);
        top: var(--space-2);
        right: var(--space-2);
    }
}
@media (max-width: 480px) {
    /* recovered: mobile overrides for inline-styled divs */
    body.page-code-file div[style*="background: linear-gradient"][style*="padding"] {
        padding: 15px 12px !important;
        margin: 15px 0 !important;
        border-radius: var(--radius-sm) !important;
    }
    body.page-code-file div[style*="background: white"][style*="padding: 20px"] {
        padding: 12px !important;
    }
    body.page-code-file .subscribers-milestone-banner {
        padding: var(--space-2) var(--space-3);
    }
    body.page-code-file .milestone-emoji {
        font-size: 18px;
        width: 38px;
        height: 38px;
    }
    body.page-code-file .milestone-main {
        font-size: 13px;
    }
    body.page-code-file .milestone-main strong {
        display: inline;
    }
    body.page-code-file .milestone-sub {
        font-size: 11px;
    }
    body.page-code-file .subscribe-btn {
        padding: var(--space-2) var(--space-4);
        font-size: 13px;
    }
    body.page-code-file .subscribe-btn svg {
        width: 14px;
        height: 14px;
        margin-right: var(--space-1);
    }
    body.page-code-file .scheduled-countdown-banner {
        padding: var(--space-8) var(--space-4);
    }
    body.page-code-file .scheduled-countdown-title {
        font-size: var(--text-xl);
    }
    body.page-code-file .countdown-unit {
        padding: var(--space-3);
        min-width: 60px;
    }
    body.page-code-file .countdown-value {
        font-size: var(--text-2xl);
    }
    body.page-code-file .countdown-label {
        font-size: 10px;
    }
    body.page-code-file .countdown-separator {
        font-size: var(--text-2xl);
    }
    body.page-code-file .scheduled-countdown-timer {
        gap: var(--space-1);
    }
    
    body.page-code-file .public-header {
        padding: var(--space-3);
    }
    body.page-code-file .public-header-brand h2 {
        font-size: var(--text-md);
    }
    body.page-code-file .public-header-brand img {
        width: 30px;
        height: 30px;
    }
    body.page-code-file .badge {
        padding: 3px var(--space-2);
        font-size: 9px;
    }
    body.page-code-file .btn-primary,
    body.page-code-file .btn-whatsapp {
        padding: var(--space-3) var(--space-4) !important;
        font-size: var(--text-sm) !important;
        min-height: 44px !important;
    }
    body.page-code-file .content-section {
        padding: var(--space-3) var(--space-3) !important;
    }

    body.page-code-file .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-1) !important;
    }

    body.page-code-file .recent-upload-popup {
        padding: var(--space-1);
        padding-top: var(--space-4);
    }
    body.page-code-file .recent-popup-header {
        padding: 42px var(--space-3) var(--space-3);
    }
    body.page-code-file .recent-popup-header h3 {
        font-size: var(--text-lg);
    }
    body.page-code-file .recent-popup-header p {
        font-size: var(--text-xs);
    }
    body.page-code-file .recent-popup-video {
        padding: var(--space-3);
    }
    body.page-code-file .recent-popup-footer {
        padding: var(--space-3) var(--space-3);
    }
    body.page-code-file .recent-popup-footer h4 {
        font-size: var(--text-base);
    }
    body.page-code-file .free-prominent {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-4);
    }
    body.page-code-file .btn-watch-now {
        font-size: var(--text-md);
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-width: 375px) {
    /* recovered: mobile override for inline-gradient divs */
    body.page-code-file div[style*="background: linear-gradient"] {
        padding: 12px !important;
    }
    
    body.page-code-file .public-header {
        padding: var(--space-2) var(--space-3);
    }
    body.page-code-file .public-header-brand h2 {
        font-size: var(--text-base);
    }
    body.page-code-file .file-header {
        padding: var(--space-3);
    }
    body.page-code-file .container {
        padding: var(--space-3) var(--space-2);
    }
    body.page-code-file .content-section {
        padding: var(--space-3) var(--space-2) !important;
    }

}

@media (max-width: 320px) {
    body.page-code-file .public-header-brand h2 {
        font-size: var(--text-sm);
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    body.page-code-file .public-header {
        position: relative;
        padding: var(--space-3) var(--space-4);
    }
    body.page-code-file .container {
        padding: var(--space-4) var(--space-5);
    }
    body.page-code-file .file-header {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    body.page-code-file .video-container {
        margin-bottom: var(--space-4);
    }
}

@media (hover: none) and (pointer: coarse) {
    body.page-code-file .nav-btn,
    body.page-code-file .btn-primary,
    body.page-code-file .btn-whatsapp {
        -webkit-tap-highlight-color: rgba(var(--c-accent-rgb), 0.1);
        touch-action: manipulation;
    }
    body.page-code-file .nav-btn:active,
    body.page-code-file .btn-primary:active,
    body.page-code-file .btn-whatsapp:active {
        transform: scale(0.98);
    }
    /* min-WIDTH on every anchor was too blunt: min-width BEATS max-width in the cascade, so any
       inline-flex chip, breadcrumb item or small "x" link got forced to 44px wide and distorted.
       real controls keep both; a bare anchor keeps only the height, which is what a thumb needs
       and which is inert on a normal inline link */
    body.page-code-file button,
    body.page-code-file input[type="button"],
    body.page-code-file input[type="submit"],
    body.page-code-file [role="button"],
    body.page-code-file a[class*="btn"],
    body.page-code-file a[class*="cta"] {
        min-height: 44px;
        min-width: 44px;
    }
    body.page-code-file a {
        min-height: 44px;
    }
}

@supports (-webkit-touch-callout: none) {
    body.page-code-file .container {
        min-height: -webkit-fill-available;
    }
    body.page-code-file input,
    body.page-code-file button,
    body.page-code-file select,
    body.page-code-file textarea {
        -webkit-border-radius: var(--radius-md);
        border-radius: var(--radius-sm);
    }
    body.page-code-file input,
    body.page-code-file select,
    body.page-code-file textarea {
        -webkit-appearance: none;
        box-shadow: none;
    }
}

@supports (padding: max(0px)) {
    body.page-code-file .public-header {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    /* safe-area protection is a PHONE concern. left unscoped this block was the last .container
       padding rule in the file, so its 10px floor silently beat the whole ladder above it —
       desktop 20px/40px and the 16px and 12px mobile tiers all rendered as 10px, everywhere */
    @media (max-width: 768px) {
        body.page-code-file .container {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
            padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
        }
    }
}

body.page-code-file button:focus-visible,
body.page-code-file a:focus-visible,
body.page-code-file input:focus-visible,
body.page-code-file select:focus-visible,
body.page-code-file textarea:focus-visible {
    outline: 3px solid var(--navy-500);
    outline-offset: 2px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body.page-code-file .file-header {
        box-shadow: var(--shadow-md);
    }
}

/* --- Free File / SweetAlert popup overrides --- */

body.page-code-file .swal2-confirm.swal2-styled {
    padding: var(--space-3) var(--space-10) !important;
    font-size: var(--text-md) !important;
    font-weight: var(--weight-semibold) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 12px rgba(var(--c-accent-rgb), 0.3) !important;
}
body.page-code-file .swal2-confirm.swal2-styled:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(var(--c-accent-rgb), 0.4) !important;
}

/* ===========================================================
   code_file.php — extra phone compaction + community popup
   close-button touch fix. Appended last so it wins on order.
   =========================================================== */
@media (max-width: 600px) {
    /* inline-padded id boxes — shrink the 30px shells */
    body.page-code-file #verifiedActionsSection,
    body.page-code-file #youtubeAuthSection {
        padding: var(--space-4) var(--space-3) !important;
        margin: var(--space-3) 0 !important;
    }
    body.page-code-file #subscriptionNoticeBanner {
        padding: var(--space-3) var(--space-4) !important;
        margin: var(--space-3) 0 !important;  /* was 0 bottom — banner sat flush on the auth card */
    }
    /* oversized CTAs in those boxes — full-width, compact height */
    body.page-code-file #startWatchingBtn,
    body.page-code-file #verifiedDownloadBtn,
    body.page-code-file #googleSignInBtn,
    body.page-code-file #verifiedActionsSection a {
        padding: var(--space-3) var(--space-5) !important;
        font-size: var(--text-base) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }
    /* white cards — class hooks added in code_file.php */
    body.page-code-file .cf-custom-card {
        padding: var(--space-4) var(--space-3) !important;
        margin-top: var(--space-4) !important;
    }
    body.page-code-file .cf-faq-card {
        padding: var(--space-4) var(--space-3) !important;
        margin: var(--space-4) 0 !important;
    }
    
    /* Free Source Code Download card — compact on mobile */

    /* community popup — reliable 44px close target */
    body.page-code-file .community-popup-close {
        width: 44px !important;
        height: 44px !important;
        top: var(--space-2) !important;
        right: var(--space-2) !important;
        font-size: var(--text-2xl) !important;
        z-index: 2 !important;
    }
}

/* touch devices — lock 44px close target + kill sticky rotate-on-tap */
@media (hover: none) and (pointer: coarse) {
    body.page-code-file .community-popup-close {
        width: 44px;
        height: 44px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12);
    }
    body.page-code-file .community-popup-close:hover {
        transform: none;
        background: var(--gray-100);
        color: var(--gray-600);
    }
}

/* regular license rights note (checkout sidebar) */
body.page-code-file .sidebar-license-note { margin: var(--space-4) 0 var(--space-1); padding: 12px 14px; background: #f0f7ff; border: 1px solid rgba(var(--c-accent-rgb),.18); border-radius: var(--radius-md); }
body.page-code-file .license-note-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--c-primary); margin-bottom: 6px; }
body.page-code-file .license-note-head i { color: var(--c-accent); }
body.page-code-file .sidebar-license-note p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #475569; }

.page-code-file .related-files-section{ margin:32px 0 8px; box-sizing:border-box; }
.page-code-file .related-files-section h2{ font-size:20px; font-weight:700; color:var(--c-primary); margin:0 0 18px; display:flex; align-items:center; gap:8px; }
.page-code-file .related-files-section h2 i{ color:var(--c-accent); }
.page-code-file .related-files-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.page-code-file .rf-card{ display:flex; flex-direction:column; border:1px solid #e2e8f0; border-radius: 14px; overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s, border-color .2s; }
.page-code-file .rf-card:hover{ box-shadow:0 8px 22px rgba(var(--c-primary-rgb),.12); transform:translateY(-3px); border-color:var(--c-accent); }
.page-code-file .rf-card-link{ display:flex; flex-direction:column; flex:1; text-decoration:none; }
.page-code-file .rf-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:var(--c-primary); overflow:hidden; }
.page-code-file .rf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-code-file .rf-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.page-code-file .rf-title{ font-size:14px; font-weight:700; color:var(--c-primary); line-height:1.35; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.page-code-file .rf-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.page-code-file .rf-badge{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius: 0; background:var(--c-tint-2); color:var(--c-accent); }
.page-code-file .rf-badge.rf-php{ background:#eef0fb; color:#5b61c4; }
.page-code-file .rf-cat{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius: 0; background:#f1f5f9; color:#475569; }
.page-code-file .rf-watch{ display:flex; align-items:center; justify-content:center; gap:7px; margin:0 14px 14px; padding:9px 12px; border-radius: 10px; background:#ff0000; color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; transition:background .2s, transform .2s; }
.page-code-file .rf-watch:hover{ background:#cc0000; transform:scale(1.02); }
.page-code-file .rf-watch i{ font-size:14px; }
.page-code-file .related-files-more{ text-align:center; margin-top:20px; }
.page-code-file .related-files-more a{ display:inline-flex; align-items:center; gap:8px; background:var(--c-primary); color:#fff; padding:11px 26px; border-radius: 10px; font-size:14px; font-weight:600; text-decoration:none; transition:background .2s; }
.page-code-file .related-files-more a:hover{ background:var(--c-accent); color:var(--c-on-accent); }
@media (max-width: 992px) {
.page-code-file .related-files-grid{ grid-template-columns:1fr; }}

@media (max-width: 560px) {
.page-code-file .related-files-section h2{ font-size:16px; margin-bottom:12px; }
.page-code-file .related-files-grid{ grid-template-columns:1fr; gap:10px; }
.page-code-file .rf-card-link{ flex-direction:row; align-items:flex-start; gap:10px; }
.page-code-file .rf-thumb{ flex:0 0 132px; width:132px; border-radius:10px; }
.page-code-file .rf-body{ padding:7px 8px 7px 0; gap:5px; }
.page-code-file .rf-title{ font-size:13px; line-height:1.3; }
.page-code-file .rf-badge, .page-code-file .rf-cat{ font-size:12px; padding:2px 7px; }   /* 12px is the floor, phones included */
.page-code-file .rf-watch{ align-self:flex-start; width:auto; margin:0 0 10px 142px; padding:6px 12px; font-size:12px; }
.page-code-file .related-files-more{ margin-top:14px; }
.page-code-file .related-files-more a{ padding:9px 20px; font-size:13px; }}

.page-code-file .video-desc-acc{ margin-top:16px; border:1px solid #e2e8f0; border-radius: 0; overflow:hidden; background:#fff; }
.page-code-file .video-desc-acc .vda-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:#f8fafc; border:none; cursor:pointer; font-size:14px; font-weight:700; color:var(--c-primary); font-family:inherit; }
.page-code-file .video-desc-acc .vda-head:hover{ background:var(--c-tint-2); }
.page-code-file .video-desc-acc .vda-head .vda-ttl{ display:flex; align-items:center; gap:8px; }
.page-code-file .video-desc-acc .vda-head .vda-ttl i{ color:var(--c-accent); }
.page-code-file .video-desc-acc .vda-icon{ color:var(--c-accent); transition:transform .2s; }
.page-code-file .video-desc-acc .vda-body{ padding:16px; border-top:1px solid #eef2f7; }
.page-code-file .video-desc-acc .vda-text{ font-size:13.5px; line-height:1.7; color:#334155; white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto; }
.page-code-file .video-desc-acc .vda-loading{ font-size:13px; color:#64748b; display:flex; align-items:center; gap:8px; }

.page-code-file .rs-lang-pulse{ animation: rsLangPulse 1.6s ease-out infinite; border-radius: 0; }
.page-code-file .rs-lang-coach{
            position: fixed; z-index: 100000; max-width: 280px; width: max-content;
            background: #fff; color: var(--c-primary); border: 1px solid #e2e8f0; border-top: 3px solid var(--c-accent);
            border-radius: 0; box-shadow: 0 12px 34px rgba(var(--c-primary-rgb),.22);
            padding: 14px 16px 12px; font-size: 14px; line-height: 1.45;
            opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease;
        }
.page-code-file .rs-lang-coach.show{ opacity: 1; transform: translateY(0); }
.page-code-file .rs-lang-coach-arrow{ position: absolute; top: -7px; width: 12px; height: 12px; background: #fff;
            border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0; transform: rotate(45deg); }
.page-code-file .rs-lang-coach-head{ display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; }
.page-code-file .rs-lang-coach-head i{ color: var(--c-accent); font-size: 16px; }
.page-code-file .rs-lang-coach-text{ color: #334155; font-size: 14px; margin: 0 0 10px; }
.page-code-file .rs-lang-coach-btn{ display: inline-flex; align-items: center; justify-content: center;
            min-height: 40px; padding: 0 18px; border: none; border-radius: 0; cursor: pointer;
            background:var(--c-accent); color:var(--c-on-accent); font-size: 14px; font-weight: 600; line-height: 1;
            transition: background .15s ease; touch-action: manipulation; }
.page-code-file .rs-lang-coach-btn:hover{ background: var(--c-accent-strong); }
@media (max-width: 480px) {
.page-code-file .rs-lang-coach{ max-width: calc(100vw - 24px); width: calc(100vw - 24px); }}

.page-code-file .file-prompt-section.ai-unlock{ padding:18px 20px; background:linear-gradient(135deg,var(--c-tint) 0%,var(--c-tint) 100%); border:1px solid var(--c-tint-line); border-left:4px solid var(--c-accent); box-shadow:0 6px 18px rgba(var(--c-primary-rgb),.06); }
.page-code-file .ai-unlock .ai-unlock-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-code-file .ai-unlock .ai-unlock-info{ display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.page-code-file .ai-unlock .ai-ico{ width:48px; height:48px; flex:none; border-radius:0; display:flex; align-items:center; justify-content:center; background:var(--c-tint-2); color:var(--c-accent); font-size:20px; box-shadow:0 2px 8px rgba(var(--c-accent-rgb),.12); }
.page-code-file .ai-unlock .ai-ico.ok{ background:#e7f7ee; color:#0a6b3d; }
.page-code-file .ai-unlock .ai-unlock-info strong{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:16px; color:var(--c-primary); font-weight:800; line-height:1.3; }
.page-code-file .ai-unlock .ai-free-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; background:#10b981; color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.page-code-file .ai-unlock .ai-unlock-info small{ display:block; font-size:13px; color:#475569; margin-top:4px; line-height:1.45; }
.page-code-file .ai-unlock .ai-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-code-file .ai-unlock .ai-open{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:linear-gradient(135deg,var(--c-accent),var(--c-primary)); color:#fff; border-radius:0; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; box-shadow:0 4px 14px rgba(var(--c-accent-rgb),.25); }
.page-code-file .ai-unlock .ai-open:hover{ filter:brightness(1.05); }
.page-code-file .ai-unlock .ai-how{ display:inline-flex; align-items:center; gap:7px; padding:11px 14px; background:#fff; color:var(--c-accent); border:1px solid var(--c-tint-line); border-radius:0; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:inherit; }
.page-code-file .ai-unlock .ai-how:hover{ background:var(--c-tint-2); border-color:var(--c-accent); }
.page-code-file .ai-unlock .ai-how i{ font-size:15px; }
@media (max-width: 560px) {
.page-code-file .ai-unlock .ai-actions{ width:100%; }
.page-code-file .ai-unlock .ai-open, .page-code-file .ai-unlock .ai-how{ flex:1; justify-content:center; }}

.page-code-file #rsAiHowModal{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(var(--c-primary-rgb),.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:rsAiHowFade .18s ease; }
.page-code-file #rsAiHowModal[hidden]{ display:none !important; }
.page-code-file.rs-ai-how-open{ overflow:hidden; }
.page-code-file .rs-ai-how-box{ width:100%; max-width:500px; background:var(--c-card); border:1px solid var(--c-tint-line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px -12px rgba(var(--c-primary-rgb),.4), 0 0 0 1px rgba(255,255,255,.06); max-height:min(90vh,660px); animation:rsAiHowPop .24s cubic-bezier(.2,.9,.3,1.2); }
.page-code-file .rs-ai-how-head{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; background:linear-gradient(135deg,var(--c-primary-dark),var(--c-primary) 60%,var(--c-secondary)); color:#fff; overflow:hidden; }
.page-code-file .rs-ai-how-head::before{ content:''; position:absolute; top:-70px; right:-40px; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle, rgba(var(--c-accent-rgb),.28) 0%, transparent 70%); pointer-events:none; }
.page-code-file .rs-ai-how-head h3{ position:relative; margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:11px; }
.page-code-file .rs-ai-how-head h3 i{ width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:rgba(var(--c-accent-rgb),.2); border:1px solid rgba(var(--c-accent-rgb),.35); color:var(--c-accent-soft); font-size:16px; }
.page-code-file .rs-ai-how-x{ position:relative; width:34px; height:34px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, transform .15s; }
.page-code-file .rs-ai-how-x:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }
.page-code-file .rs-ai-how-body{ padding:18px 20px 8px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--c-tint-line) transparent; }
.page-code-file .rs-ai-how-intro{ margin:0 0 14px; font-size:13.5px; color:var(--c-text-muted); line-height:1.55; padding:10px 14px; background:var(--c-tint); border:1px solid var(--c-tint-line); border-radius:12px; }
.page-code-file .rs-ai-how-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.page-code-file .rs-ai-how-steps li{ display:flex; gap:13px; align-items:flex-start; padding:13px 14px; background:var(--c-card); border:1px solid var(--c-tint-line); border-radius:14px; transition:border-color .15s, box-shadow .15s, transform .15s; }
.page-code-file .rs-ai-how-steps li:hover{ border-color:rgba(var(--c-accent-rgb),.45); box-shadow:0 6px 18px rgba(var(--c-primary-rgb),.07); transform:translateY(-1px); }
.page-code-file .rs-ai-how-num{ width:28px; height:28px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-strong)); color:var(--c-on-accent); font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(var(--c-accent-rgb),.35); }
.page-code-file .rs-ai-how-steps strong{ display:block; font-size:13.5px; color:var(--c-primary); margin-bottom:3px; letter-spacing:-.01em; }
.page-code-file .rs-ai-how-steps span{ display:block; font-size:12.5px; color:var(--c-text-muted); line-height:1.5; }
.page-code-file .rs-ai-how-foot{ padding:14px 20px 18px; display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--c-tint-line); background:var(--c-tint); }
.page-code-file .rs-ai-how-foot .ai-open{ flex:1; min-width:140px; justify-content:center; border-radius:999px !important; }
.page-code-file .rs-ai-how-foot .ai-how-close{ flex:1; min-width:120px; padding:11px 16px; background:var(--c-card); border:1px solid var(--c-tint-line); border-radius:999px; color:var(--c-primary); font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s, border-color .15s; }
.page-code-file .rs-ai-how-foot .ai-how-close:hover{ background:var(--c-tint-2); border-color:var(--c-accent); }
@media (prefers-reduced-motion: reduce) { .page-code-file #rsAiHowModal, .page-code-file .rs-ai-how-box{ animation:none; } }
.page-code-file .cf-prompt-wrap{ display:flex; align-items:stretch; gap:8px; margin:0 0 12px; width:100%; box-sizing:border-box; }
.page-code-file .cf-prompt-cta{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; box-sizing:border-box; padding:12px 14px; background:var(--c-tint-2); border:1px solid var(--c-tint-line); border-radius:0; color:var(--c-primary); text-decoration:none; transition:.15s; }
.page-code-file .cf-prompt-cta:hover{ background:var(--c-tint-2); border-color:var(--c-tint-line); }
.page-code-file .cf-prompt-cta .cf-prompt-ic{ width:34px; height:34px; flex:none; border-radius:0; display:flex; align-items:center; justify-content:center; background:var(--c-accent); color:var(--c-on-accent); font-size:15px; }
.page-code-file .cf-prompt-cta .cf-prompt-txt{ min-width:0; line-height:1.3; }
.page-code-file .cf-prompt-cta .cf-prompt-txt strong{ display:block; font-size:13.5px; font-weight:700; }
.page-code-file .cf-prompt-cta .cf-prompt-txt small{ display:block; font-size:11.5px; color:#5b6b80; }
.page-code-file .cf-prompt-cta .cf-prompt-go{ margin-left:auto; flex:none; font-size:12px; font-weight:700; color:var(--c-accent); white-space:nowrap; }
.page-code-file .cf-prompt-how{ flex:none; width:46px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--c-tint-line); color:var(--c-accent); cursor:pointer; font-size:18px; padding:0; font-family:inherit; }
.page-code-file .cf-prompt-how:hover{ background:var(--c-tint-2); border-color:var(--c-accent); }

/* ===== code_file/source_code — apple-style pill actions (beats legacy inline radius) ===== */
.page-code-file button[style],
.page-code-file a[style*="box-shadow"],
.page-code-file .gsc-btn-demo,
.page-code-file .gsc-btn-hire,
.page-code-file .swal2-styled { border-radius: 999px !important; }

/* ===== code_file/source_code — enterprise polish v2: one calm system over the legacy inline styles ===== */
/* one card shell everywhere */
body.page-code-file .cf-fileinfo-card,
body.page-code-file .cf-features,
body.page-code-file .cf-desc,
body.page-code-file .cf-faq-card,
body.page-code-file .cf-custom-card,
body.page-code-file .checkout-sidebar,
body.page-code-file .auth-section,
body.page-code-file .content-section,
body.page-code-file #verifiedActionsSection {
    background: var(--c-card) !important;
    border: 1px solid var(--c-tint-line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .04), 0 10px 28px rgba(var(--c-primary-rgb), .06) !important;
}
/* success section: quiet accent cue instead of a green frame */
body.page-code-file #verifiedActionsSection { border-top: 3px solid var(--c-accent) !important; }

/* legacy loud inline gradients → theme — ONLY elements that had a gradient background inline;
   plain colored text that merely mentions a hex must never get painted */
body.page-code-file div[style*="linear-gradient"][style*="#ecfdf5"] { background: var(--c-tint) !important; }
body.page-code-file a[style*="linear-gradient"][style*="#3b82f6"],
body.page-code-file button[style*="linear-gradient"][style*="#3b82f6"],
body.page-code-file a[style*="linear-gradient"][style*="#10b981"],
body.page-code-file button[style*="linear-gradient"][style*="#10b981"] { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-strong)) !important; color: var(--c-on-accent) !important; }
body.page-code-file span[style*="background:#10b981"],
body.page-code-file span[style*="background: #10b981"] { background: var(--c-accent) !important; color: var(--c-on-accent) !important; }
body.page-code-file div[style*="linear-gradient"][style*="#ef4444"] { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important; }
body.page-code-file #watchProgressBar { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-strong)) !important; }
body.page-code-file #startWatchingBtn { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important; color: var(--c-on-primary) !important; box-shadow: 0 5px 16px rgba(var(--c-primary-rgb), .28) !important; }

/* two-tier button shadows — primaries glow softly in accent, everything else stays quiet */
body.page-code-file button[style],
body.page-code-file a[style*="box-shadow"] { box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), .12) !important; }
body.page-code-file #verifiedDownloadBtn,
body.page-code-file #getSourceCodeBtn,
body.page-code-file #buyWithPointsBtn { box-shadow: 0 8px 20px rgba(var(--c-accent-rgb), .3) !important; }

/* typography discipline — tight headings, tabular prices */
body.page-code-file h1, body.page-code-file h2,
body.page-code-file h3, body.page-code-file h4 { letter-spacing: -.015em; }
body.page-code-file .cf-features h3,
body.page-code-file .cf-faq-card > h3,
body.page-code-file .cf-custom-card h3 { font-size: 17px !important; font-weight: 800 !important; }
body.page-code-file .cf-fileinfo-card table,
body.page-code-file .checkout-sidebar { font-variant-numeric: tabular-nums; }

/* consistent focus visibility */
body.page-code-file a:focus-visible,
body.page-code-file button:focus-visible { outline: 3px solid rgba(var(--c-accent-rgb), .55); outline-offset: 2px; }

/* related files — proper card container like every other section */
body.page-code-file .related-files-section {
    background: var(--c-card);
    border: 1px solid var(--c-tint-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .04), 0 10px 28px rgba(var(--c-primary-rgb), .06);
    padding: 26px 26px 22px;
}
@media (max-width: 600px) {
    body.page-code-file .related-files-section { padding: 18px 14px 14px; }
}
/* thank-you overlay uses its base rounded radii (curved design) — the success ring stays a circle */

/* PK-only card CTA — card-gateway paytm-style button (user order 2026-08-12) */
body.page-code-file .pk-card-btn { background: linear-gradient(180deg, #21B573 0%, #0B5B3C 100%); box-shadow: 0 14px 26px rgba(23, 160, 96, .38), 0 2px 4px rgba(0, 0, 0, .12); }
body.page-code-file .pk-card-btn:hover { background: linear-gradient(180deg, #2FD189 0%, #0E7049 100%); }
body.page-code-file .pk-card-note { margin: 8px 2px 0; font-size: 12px; font-weight: 600; color: #475569; line-height: 1.55; text-align: center; }
body.page-code-file .pk-card-note i { color: #21B573; margin-right: 4px; }
@media (min-width: 769px) {
    body.page-code-file .paytm-left, body.page-code-file .binance-left, body.page-code-file .crypto-left { padding: 34px 28px; }
}

/* ===== pmx v4 — the "quiet two-pane" checkout artboard. ONE look for every popup on the file
   pages (paytm / sadapay / binance / paypal / crypto / admin-added), matching the plan-checkout
   modal in manual_pay_modal.php. Tokens are declared on the overlay so the artboard palette can
   never leak into the themed site behind it. The sheet is full-bleed — 100% width and height at
   every breakpoint (owner order). Markup: pm_generic_manual.php ===== */
body.page-code-file .paytm-overlay,
body.page-code-file .binance-overlay,
body.page-code-file .crypto-overlay {
    /* chrome rides the admin ui_setting palette; the hairlines that sit under form controls
       stay neutral so an input still reads on a pale-accent theme */
    --pmx-ink: var(--c-primary, #17161a); --pmx-ink2: var(--c-text, #4a4952); --pmx-mut: var(--c-text-muted, #6b6a72);
    --pmx-rail: var(--c-tint, #faf9f7); --pmx-sw: var(--c-tint-2, #eceae6);
    --pmx-l1: var(--c-tint-line, rgba(0,0,0,.08)); --pmx-l2: var(--c-tint-line, rgba(0,0,0,.12));
    --pmx-li: rgba(0,0,0,.16); --pmx-ld: rgba(0,0,0,.2);
    --pmx-link: var(--c-accent, #4340c4); --pmx-ok: var(--c-verified, #2f7d5b);
    --pmx-accent: var(--c-accent, #4340c4);
    /* on-* ink is only guaranteed against its OWN surface — never pair them across tokens */
    --pmx-on-ink: var(--c-on-primary, #fff); --pmx-on-accent: var(--c-on-accent, #fff);
    --pmx-sans: var(--font-family-base); /* the site face — no artboard-only family */
    --pmx-mono: var(--font-family-mono);
    padding: 0; background: #fff; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; align-items: stretch; justify-content: center;
    font-family: var(--pmx-sans); color: var(--pmx-ink); line-height: 1.5;
}
body.page-code-file .paytm-box,
body.page-code-file .binance-box,
body.page-code-file .crypto-box {
    background: #fff; width: 100%; max-width: none; max-height: none;
    min-height: 100%;
    margin: 0; display: flex; flex-direction: column; gap: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none;
}

/* header */
body.page-code-file .pmx-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 28px; background: #fff; color: var(--pmx-ink);
    border: 0; border-bottom: 1px solid var(--pmx-l1); border-radius: 0;
    position: sticky; top: 0; z-index: 2; box-shadow: none;
}
body.page-code-file .pmx-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.page-code-file .pmx-badge {
    width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--pmx-accent); color: var(--pmx-on-accent);
    display: flex; align-items: center; justify-content: center;
    font: 600 13px var(--pmx-mono); letter-spacing: .02em;
}
body.page-code-file .pmx-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-code-file .pmx-head-t { font: 600 14px/1.2 var(--pmx-sans); color: var(--pmx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-code-file .pmx-head-s { font: 400 12px/1.2 var(--pmx-sans); color: var(--pmx-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-code-file .pmx-head-r { display: flex; align-items: center; gap: 16px; flex: none; }
body.page-code-file .pmx-secure { display: flex; align-items: center; gap: 6px; font: 500 12px var(--pmx-sans); color: var(--pmx-ok); white-space: nowrap; }
body.page-code-file .pmx-secure i { width: 6px; height: 6px; border-radius: 50%; background: var(--pmx-ok); }
body.page-code-file .pmx-close {
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--pmx-l2); background: #fff;
    color: var(--pmx-mut); font: 400 15px/1 var(--pmx-sans); cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: none; touch-action: manipulation;
}
body.page-code-file .pmx-close:hover { background: var(--pmx-rail); color: var(--pmx-ink); }

/* two panes */
body.page-code-file .paytm-grid,
body.page-code-file .binance-grid,
body.page-code-file .crypto-grid {
    display: grid; grid-template-columns: minmax(320px, 460px) 1fr; align-items: stretch;
    flex: 1 1 auto; min-height: 0;
    gap: 0; max-width: none; width: 100%; margin: 0; background: transparent;
}
body.page-code-file .paytm-left,
body.page-code-file .binance-left,
body.page-code-file .crypto-left {
    padding: 28px; border: 0; border-right: 1px solid var(--pmx-l1); background: var(--pmx-rail);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 22px; min-width: 0; text-align: left; border-radius: 0; box-shadow: none; max-height: none;
}
body.page-code-file .paytm-right,
body.page-code-file .binance-right,
body.page-code-file .crypto-right {
    padding: 28px 30px; background: #fff; display: flex; flex-direction: column; gap: 20px;
    min-width: 0; max-height: none; border-radius: 0; box-shadow: none;
}

/* amount */
body.page-code-file .pmx-amount { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; width: 100%; }
body.page-code-file .pmx-cap { font: 500 11px/1 var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); }
body.page-code-file .pmx-amt { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
body.page-code-file .pmx-price { font: 600 40px/1 var(--pmx-mono); color: var(--pmx-ink); letter-spacing: -.02em; word-break: break-word; }
body.page-code-file .pmx-was { font: 400 14px var(--pmx-sans); color: var(--pmx-mut); text-decoration: line-through; }
body.page-code-file .pmx-amt-note { margin-top: 6px; font: 400 13px var(--pmx-sans); color: var(--pmx-mut); }

/* qr */
body.page-code-file .pmx-qr {
    background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; padding: 22px;
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
body.page-code-file .pmx-qr img { width: 180px; max-width: 100%; height: 180px; object-fit: contain; border: 1px solid var(--pmx-l1); border-radius: 8px; background: #fff; padding: 6px; box-sizing: border-box; }
body.page-code-file .pmx-qr-label { order: 2; font: 400 12px var(--pmx-sans); color: var(--pmx-mut); }
body.page-code-file .qr-fallback { display: none; font: 400 12px/1.5 var(--pmx-sans); color: #7a5510; background: #fdfaf0; border: 1px solid rgba(184,132,42,.28); border-radius: 9px; padding: 10px 12px; word-break: break-word; }
body.page-code-file .qr-dead .qr-fallback { display: block; }
body.page-code-file .qr-dead img { display: none; }

/* pay-to card */
body.page-code-file .pmx-idbox { display: flex; flex-direction: column; gap: 8px; }
body.page-code-file .pmx-idbox-label { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); margin: 0; }
body.page-code-file .pmx-idbox-label i { font-size: 11px; color: inherit; }
body.page-code-file .pmx-idbox-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border: 1px solid var(--pmx-accent, var(--pmx-l2)); border-radius: 9px; padding: 12px 14px;
}
body.page-code-file .pmx-idbox-id { flex: 1; min-width: 0; font: 500 16px var(--pmx-mono); color: var(--pmx-ink); letter-spacing: .04em; user-select: all; word-break: break-all; line-height: 1.35; }
body.page-code-file .pmx-copy { background: none; border: 0; padding: 6px 2px; margin: -6px 0; font: 500 12px var(--pmx-sans); color: var(--pmx-link); cursor: pointer; flex: none; touch-action: manipulation; }
body.page-code-file .pmx-copy:hover { text-decoration: underline; }
body.page-code-file .pmx-recipient,
body.page-code-file .pm-holder { font: 400 12px/1.5 var(--pmx-sans); color: var(--pmx-mut); margin: 0; padding: 0; border: 0; text-align: left; }
body.page-code-file .pm-holder i { color: var(--pmx-ok); margin-right: 5px; }
body.page-code-file .pmx-recipient b, body.page-code-file .pm-holder strong { font-weight: 500; color: var(--pmx-ink); }
body.page-code-file .pmx-idfield { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--pmx-l2); border-radius: 9px; padding: 10px 12px; }
body.page-code-file .pmx-idfield-label { flex: none; max-width: 42%; font: 400 10.5px var(--pmx-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pmx-mut); }
body.page-code-file .pmx-idfield-val { flex: 1; min-width: 0; font: 500 13.5px var(--pmx-sans); color: var(--pmx-ink); text-align: right; word-break: break-all; user-select: all; line-height: 1.45; }
body.page-code-file .pmx-idfield-val.mono { font-family: var(--pmx-mono); }

/* notices */
body.page-code-file .pmx-note { display: flex; gap: 8px; align-items: flex-start; border: 1px solid; border-radius: 9px; padding: 10px 12px; font: 400 12px/1.5 var(--pmx-sans); }
body.page-code-file .pmx-note i { margin-top: 2px; flex: none; }
body.page-code-file .pmx-note-warn { background: #fdfaf0; border-color: rgba(184,132,42,.28); color: #7a5510; }
body.page-code-file .pmx-note-danger { background: #fdf6f3; border-color: rgba(170,75,40,.22); color: #8a3d1c; }
body.page-code-file .pmx-note-info { background: var(--pmx-rail); border-color: var(--pmx-l1); color: var(--pmx-ink2); }
body.page-code-file .method-verification-notice {
    display: flex; gap: 8px; align-items: flex-start; margin: 0;
    background: #fdfaf0 !important; border: 1px solid rgba(184,132,42,.28) !important; color: #7a5510 !important;
    border-radius: 9px; padding: 10px 12px; font: 400 12px/1.5 var(--pmx-sans);
}
body.page-code-file .method-verification-notice i { color: #b8842a !important; margin-top: 2px; flex: none; }
body.page-code-file .method-verification-notice strong { font-weight: 600; }

/* open-app action */
body.page-code-file .pmx-open {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; box-sizing: border-box; border: 0; border-radius: 10px;
    background: var(--pmx-ink); color: var(--pmx-on-ink); font: 600 14px var(--pmx-sans);
    text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background .15s;
}
body.page-code-file .pmx-open:hover { background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--pmx-ink); color: var(--pmx-on-ink); transform: none; }

/* pay-now group — the bare "Open ... Link" button told the buyer nothing on its own */
body.page-code-file .pmx-paynow { display: flex; flex-direction: column; gap: 8px; }
body.page-code-file .pmx-paynote { font: 400 11.5px/1.5 var(--pmx-sans); color: var(--pmx-mut); }

/* what happens after you pay — answers "where do I get my file" in the rail */
body.page-code-file .pmx-info { border: 1px solid var(--pmx-l1); border-radius: 10px; background: #fff; padding: 14px 16px; }
body.page-code-file .pmx-info-h { display: flex; align-items: center; gap: 7px; font: 500 11px/1 var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); margin-bottom: 10px; }
body.page-code-file .pmx-info-h i { color: var(--pmx-accent); font-size: 12px; }
body.page-code-file .pmx-info-l { counter-reset: pmxinfo; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
/* the marker is absolute ON PURPOSE — a flex li turns every inline <strong> into its own
   flex item, which shredded these sentences into columns */
body.page-code-file .pmx-info-l li { counter-increment: pmxinfo; position: relative; padding-left: 28px; font: 400 12px/1.55 var(--pmx-sans); color: var(--pmx-mut); }
body.page-code-file .pmx-info-l li::before { content: counter(pmxinfo); position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--pmx-rail); border: 1px solid var(--pmx-l2); color: var(--pmx-mut); display: flex; align-items: center; justify-content: center; font: 600 10px var(--pmx-mono); }
body.page-code-file .pmx-info-l li b { display: block; margin-bottom: 2px; font: 600 12.5px var(--pmx-sans); color: var(--pmx-ink); }
body.page-code-file .pmx-info-l strong { font-weight: 600; color: var(--pmx-ink); }

/* trust strip — pinned to the foot of the rail */
body.page-code-file .pmx-trust {
    display: flex; gap: 18px; flex-wrap: wrap; margin-top: auto; padding: 18px 0 0;
    border: 0; border-top: 1px solid var(--pmx-l1); border-radius: 0; background: none;
}
body.page-code-file .pmx-trust::before { content: none; }
body.page-code-file .pmx-trust div { flex: 1 1 auto; font: 400 11px/1.4 var(--pmx-sans); color: var(--pmx-mut); text-align: left; }

/* numbered steps — the artboard draws 3; real methods emit 2-5, so it wraps 3-up */
body.page-code-file .pmx-howhead { font: 500 11px/1 var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); display: block; margin: 0 0 14px; }
body.page-code-file .pmx-howhead i { display: none; }
body.page-code-file .pmx-steps {
    counter-reset: pmxstep; display: flex; flex-wrap: wrap; row-gap: 14px;
    margin: 0; padding: 0; list-style: none; background: none; border: 0; border-radius: 0;
}
body.page-code-file .pmx-steps li {
    counter-increment: pmxstep; flex: 1 1 30%; min-width: 170px; position: relative;
    padding: 0 14px 0 44px; border-left: 1px solid var(--pmx-l1);
    font: 400 12px/1.45 var(--pmx-sans); color: var(--pmx-ink2);
}
body.page-code-file .pmx-steps li:first-child,
body.page-code-file .pmx-steps li:nth-child(3n+1) { padding-left: 30px; border-left: 0; }
body.page-code-file .pmx-steps li::before {
    content: counter(pmxstep); position: absolute; left: 14px; top: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--pmx-accent); color: var(--pmx-on-accent); display: flex; align-items: center; justify-content: center;
    font: 600 11px var(--pmx-mono);
}
body.page-code-file .pmx-steps li:first-child::before,
body.page-code-file .pmx-steps li:nth-child(3n+1)::before { left: 0; }
body.page-code-file .pmx-steps strong { font-weight: 600; color: var(--pmx-ink); }
body.page-code-file .pmx-rule { height: 1px; background: var(--pmx-l1); }

/* proof form — email + whatsapp share a row, everything else spans */
body.page-code-file .proof-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
body.page-code-file .proof-form > * { grid-column: 1 / -1; }
body.page-code-file .proof-form > .proof-field:has(.proof-email),
body.page-code-file .proof-form > .proof-field:has(.proof-phone-row) { grid-column: span 1; }
body.page-code-file .proof-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
body.page-code-file .proof-label { display: block; margin: 0; font: 500 12px var(--pmx-sans); color: var(--pmx-ink); white-space: normal; }
body.page-code-file .proof-label i { display: none; }
body.page-code-file .proof-input {
    width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--pmx-li); border-radius: 9px;
    font: 400 14px var(--pmx-sans); color: var(--pmx-ink); background: #fff; box-sizing: border-box;
    transition: border-color .15s;
}
body.page-code-file .proof-input:focus { outline: none; border-color: var(--pmx-accent); }
body.page-code-file .proof-input::placeholder { color: #a5a4ab; }
body.page-code-file input[id$="TxnId"].proof-input,
body.page-code-file input[id^="ommTxn"].proof-input,
body.page-code-file #cryptoTxHash.proof-input { font-family: var(--pmx-mono); }
body.page-code-file .proof-hint { font: 400 11px/1.4 var(--pmx-sans); color: var(--pmx-mut); margin: 0; }
body.page-code-file .proof-hint-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; font: 400 12px/1.5 var(--pmx-sans); background: #fdfaf0; border: 1px solid rgba(184,132,42,.28); border-radius: 9px; color: #7a5510; }
body.page-code-file .proof-hint-warn i { margin-top: 2px; flex: none; color: #b8842a; }
body.page-code-file .proof-hint-warn strong { color: #7a5510; font-weight: 600; }
body.page-code-file .proof-phone-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: nowrap; }
body.page-code-file .proof-phone-row .proof-phone-num { flex: 1 1 auto; min-width: 0; width: auto; }
body.page-code-file .proof-cc { flex: 0 0 128px; max-width: 128px; padding: 0; border: 0; background: transparent; }
body.page-code-file .proof-cc .rsdc-btn {
    width: 100%; height: 44px; padding: 0 11px; border: 1px solid var(--pmx-li); border-radius: 9px;
    background: #fff; font: 400 13px var(--pmx-sans); color: var(--pmx-ink);
    display: flex; align-items: center; gap: 6px; box-sizing: border-box;
}
body.page-code-file .proof-cc.open .rsdc-btn { border-color: var(--pmx-accent); box-shadow: none; }
body.page-code-file .proof-phone-row.proof-phone-locked { display: grid; grid-template-columns: 128px 1fr; }
body.page-code-file .proof-cc-locked { height: 44px; padding: 0 11px; border: 1px solid var(--pmx-l2); border-radius: 9px; background: var(--pmx-rail); font: 500 13px var(--pmx-mono); color: var(--pmx-ink2); text-align: center; box-sizing: border-box; }
body.page-code-file .proof-readonly { padding: 0 13px; height: 44px; border: 1px dashed var(--pmx-ld); border-radius: 9px; background: var(--pmx-rail); font: 400 13.5px var(--pmx-sans); color: var(--pmx-ink); display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; overflow: hidden; box-sizing: border-box; }
body.page-code-file .proof-readonly i { color: var(--pmx-ok); }
body.page-code-file .proof-readonly-tag { font: 400 11px var(--pmx-sans); color: var(--pmx-mut); white-space: nowrap; }
body.page-code-file .proof-email-status { font: 400 12px/1.45 var(--pmx-sans); margin: 0; padding: 9px 11px; border-radius: 9px; }
body.page-code-file .proof-email-status.exists { background: #f1f7f3; color: var(--pmx-ok); border: 1px solid rgba(47,125,91,.24); }
body.page-code-file .proof-email-status.fresh { background: #f3f3fb; color: var(--pmx-link); border: 1px solid rgba(67,64,196,.22); }

/* screenshot picker — reads as the artboard's dropzone */
body.page-code-file .proof-form input[type="file"].file-input {
    width: 100%; height: 64px; padding: 0 16px; box-sizing: border-box;
    border: 1px dashed var(--pmx-ld); border-radius: 9px; background: var(--pmx-rail);
    font: 400 12px var(--pmx-sans); color: var(--pmx-mut); cursor: pointer;
    display: flex; align-items: center; gap: 14px;
}
body.page-code-file .proof-form input[type="file"].file-input::file-selector-button {
    background: #fff !important; color: var(--pmx-link) !important; border: 1px solid var(--pmx-l2) !important;
    border-radius: 7px; font: 500 12px var(--pmx-sans); padding: 9px 14px; margin-right: 14px; cursor: pointer;
}

/* submit + note */
body.page-code-file .proof-submit-btn {
    width: 100%; height: 50px; padding: 0; border: 0; border-radius: 10px;
    background: var(--pmx-accent); color: var(--pmx-on-accent); font: 600 14px var(--pmx-sans); cursor: pointer;
    box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    touch-action: manipulation; transition: background .15s;
}
body.page-code-file .proof-submit-btn:hover { background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--pmx-accent); box-shadow: none; }
body.page-code-file .proof-submit-btn:disabled { opacity: .6; cursor: not-allowed; }
body.page-code-file .proof-note { text-align: center; font: 400 11.5px var(--pmx-sans); color: var(--pmx-mut); margin: 0; }

/* invoice */
body.page-code-file .pmx-invoice { border: 1px solid rgba(0,0,0,.09); border-radius: 10px; overflow: hidden; margin: 0; text-align: left; }
body.page-code-file .pmx-invhead { padding: 10px 14px; background: var(--pmx-rail); border-bottom: 1px solid var(--pmx-l1); font: 500 11px var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); }
body.page-code-file .pmx-invrow { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; font: 400 13px var(--pmx-sans); color: var(--pmx-ink2); border: 0; }
body.page-code-file .pmx-invrow + .pmx-invrow { border-top: 1px solid rgba(0,0,0,.06); }
body.page-code-file .pmx-invrow span { color: var(--pmx-ink2); flex-shrink: 0; }
body.page-code-file .pmx-invrow b { font-weight: 400; color: var(--pmx-ink); text-align: right; word-break: break-word; }
body.page-code-file .pmx-invtotal { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-top: 1px solid rgba(0,0,0,.1); background: var(--pmx-rail); font: 600 14px var(--pmx-sans); color: var(--pmx-ink); }
body.page-code-file .pmx-invtotal b { font-family: var(--pmx-mono); font-weight: 600; }

/* crypto picker — same language as the rest of the rail */
body.page-code-file .crypto-wallet-picker { display: flex; flex-direction: column; gap: 8px; }
body.page-code-file .crypto-wallet-opt { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pmx-l2); border-radius: 9px; padding: 11px 13px; cursor: pointer; font: 400 13px var(--pmx-sans); color: var(--pmx-ink); }
body.page-code-file .crypto-wallet-opt.active { border-color: var(--pmx-accent); }
body.page-code-file .crypto-wallet-opt-name { font: 500 13px var(--pmx-sans); color: var(--pmx-ink); }
body.page-code-file .crypto-wallet-opt-chain { font: 400 11px var(--pmx-sans); color: var(--pmx-mut); }
body.page-code-file .crypto-wallet-opt-txt { flex: 1; min-width: 0; }
body.page-code-file .crypto-wallet-opt-name i { margin-right: 6px; color: var(--pmx-mut); }
body.page-code-file .crypto-selected-addr { display: flex; flex-direction: column; gap: 8px; }
body.page-code-file .crypto-selected-addr-label { font: 500 11px/1 var(--pmx-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-mut); }
body.page-code-file .crypto-selected-addr-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--pmx-l2); border-radius: 9px; padding: 12px 14px; font: 500 13.5px var(--pmx-mono); color: var(--pmx-ink); word-break: break-all; }
body.page-code-file .crypto-copy-btn { background: none; border: 0; padding: 0; color: var(--pmx-link); cursor: pointer; font-size: 13px; flex: none; }

/* extra room on very wide screens — full-bleed shouldn't mean thin content against the edge */
@media (min-width: 1600px) {
    body.page-code-file .paytm-left,
    body.page-code-file .binance-left,
    body.page-code-file .crypto-left { padding: 36px 40px; }
    body.page-code-file .paytm-right,
    body.page-code-file .binance-right,
    body.page-code-file .crypto-right { padding: 36px 48px; }
}

/* tablet + phone — panes stack, rail first, and the sheet stays full-bleed */
@media (max-width: 900px) {
    body.page-code-file .pmx-header { padding: 13px 16px; gap: 12px; }
    body.page-code-file .pmx-head-r { gap: 10px; }
    body.page-code-file .pmx-close { width: 40px; height: 40px; font-size: 20px; }
    body.page-code-file .paytm-grid,
    body.page-code-file .binance-grid,
    body.page-code-file .crypto-grid { display: block; }
    body.page-code-file .paytm-left,
    body.page-code-file .binance-left,
    body.page-code-file .crypto-left { border-right: 0; border-bottom: 1px solid var(--pmx-l1); }
    body.page-code-file .paytm-left,
    body.page-code-file .binance-left,
    body.page-code-file .crypto-left,
    body.page-code-file .paytm-right,
    body.page-code-file .binance-right,
    body.page-code-file .crypto-right { padding: 20px 16px; }
    /* the submit button must clear the home indicator / gesture bar */
    body.page-code-file .paytm-right,
    body.page-code-file .binance-right,
    body.page-code-file .crypto-right { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
    body.page-code-file .proof-form { grid-template-columns: 1fr; }
    body.page-code-file .proof-form > .proof-field:has(.proof-email),
    body.page-code-file .proof-form > .proof-field:has(.proof-phone-row) { grid-column: 1 / -1; }
    body.page-code-file .pmx-steps li { flex: 1 1 100%; padding: 0 0 0 30px; border-left: 0; }
    body.page-code-file .pmx-steps li::before { left: 0; }
    body.page-code-file .pmx-price { font-size: 34px; }
    body.page-code-file .pmx-trust { gap: 10px 16px; }
    body.page-code-file .pmx-qr { padding: 18px; }
    body.page-code-file .pmx-qr img { width: min(200px, 56vw); height: min(200px, 56vw); }
    /* ios zooms any field under 16px on focus — keep the artboard's 14px on desktop only */
    body.page-code-file .proof-input,
    body.page-code-file .proof-cc .rsdc-btn,
    body.page-code-file .proof-cc-locked { font-size: 16px; }
    body.page-code-file .proof-submit-btn { height: 52px; }
}

/* small phones — the dial-code column can't eat the number field */
@media (max-width: 420px) {
    body.page-code-file .pmx-header { padding: 12px 14px; }
    body.page-code-file .paytm-left,
    body.page-code-file .binance-left,
    body.page-code-file .crypto-left,
    body.page-code-file .paytm-right,
    body.page-code-file .binance-right,
    body.page-code-file .crypto-right { padding: 18px 14px; }
    body.page-code-file .proof-cc { flex: 0 0 104px; max-width: 104px; }
    body.page-code-file .proof-cc .rsdc-btn { padding: 0 8px; gap: 4px; }
    body.page-code-file .proof-phone-row.proof-phone-locked { grid-template-columns: 104px 1fr; }
    body.page-code-file .pmx-price { font-size: 30px; }
    body.page-code-file .pmx-idbox-id { font-size: 14.5px; }
    body.page-code-file .pmx-head-s { display: none; }
    body.page-code-file .pmx-secure span,
    body.page-code-file .pmx-secure { font-size: 11px; }
}

/* ---- whatsapp rail: unread emphasis + compact filter strip ---- */
/* unread reads loud, read goes quiet — the pill is only half the signal in whatsapp */

/* compact filters: search, tabs and the sort strip give the list back its rows */

/* ---- chat console: project chip, google meet popup, scheduled queue ---- */
/* the chathead grew two more controls — never let them push the row wider than the pane */

/* project status chip — answers "is anything running" before anyone clicks */

/* the chathead row does not wrap — a long multi-currency label must never push the icons off */

/* both popups open FROM inside the console, which is fixed + opaque at z-index 10003 —
   without this they render behind it and never appear (the quote modal carries the same rule) */

/* projects popup — same row shape as the files panel, so the stage picker behaves identically */

/* google meet popup */

/* the two clocks, side by side — the whole point of the feature in one glance */

/* scheduled-message marker on the rail row + its tab count */

/* projects tab — same orange the project chip on the row already uses */

/* ---- rail filter tabs: genuinely scrollable, not just clipped ---- */
/* eight-plus tabs never fit a 350px rail. they were overflow-x:auto already, but with the
   scrollbar hidden and no wheel handling it just read as "cut off" on a desktop mouse */

   /* never squash a tab to fit — scroll instead */
/* the strip fades at the edge it can still scroll toward, so there is always a visible hint */

/* blocked: the one chat state a new message does not lift */

/* ---- console popups: sizing + the [hidden] trap ---- */
/* a class-level display beats the ua [hidden] rule (same note as .qr-modal[hidden] above).
   without this the 12-button stage picker is ALWAYS expanded — in the projects popup and in
   the files panel it was copied from, which is why every task rendered its whole picker */

/* 90% of the viewport, as asked — both popups carry real content, not a confirm box */

/* ---- projects popup: master list left, detail right (Task Manager shape) ---- */

/* scrolling flex column: children must not shrink. qr-tk-chat has overflow:auto so its
   min-height:auto is 0 -> it collapsed to a sliver and the notes were invisible */

/* ---- sales statement popup: totals strip, then one row per order ---- */

/* booked meeting: listed on the rail the way the starred set is */

/* ---- projects popup: stage picker left, live message preview right ---- */

/* ---- code-file promo ad — lifted out of the inline <style> in code_file.php ----
   house rule: all css lives here, never a <style> block in a .php file. scoped to the
   page because that is the only place .cfad-* renders ---- */
/* code-file promo ad — embed card + popups */
body.page-code-file .cfad-card { margin: 28px 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,31,63,.12); box-shadow: 0 10px 30px rgba(0,31,63,.10); background: #fff; }
body.page-code-file .cfad-img { display: block; }
body.page-code-file .cfad-img img { display: block; width: 100%; height: auto; } /* full ad, never cropped */
body.page-code-file .cfad-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
body.page-code-file .cfad-title { font-weight: 700; color: var(--c-primary, #001f3f); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-code-file .cfad-wa { display: inline-flex; align-items: center; gap: 7px; background: var(--c-support, #25D366); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 10px; flex-shrink: 0; }
body.page-code-file .cfad-wa:hover { filter: brightness(1.06); }
body.page-code-file .cfad-info-btn { background: none; border: 1.5px solid rgba(0,31,63,.2); color: var(--c-accent, #0074D9); width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; flex-shrink: 0; transition: all .15s; }
body.page-code-file .cfad-info-btn:hover { background: var(--c-accent, #0074D9); color: #fff; border-color: var(--c-accent, #0074D9); }
body.page-code-file .cfad-overlay { position: fixed; inset: 0; z-index: 12000; background: rgba(0, 20, 40, .72); display: none; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; }
body.page-code-file .cfad-overlay.active { display: flex; }
body.page-code-file .cfad-modal { width: 80%; max-width: 960px; max-height: 92vh; background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.4); position: relative; }
body.page-code-file .cfad-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 19px; cursor: pointer; line-height: 1; }
body.page-code-file .cfad-x:hover { background: rgba(0,0,0,.8); }
body.page-code-file .cfad-modal .cfad-body { overflow-y: auto; }
/* popup sizes itself to the ad — whole image stays in view, no crop */
body.page-code-file #cfadPopup .cfad-modal { width: auto; min-width: min(360px, 92vw); }
body.page-code-file #cfadPopup .cfad-img img { width: auto; max-width: 100%; height: auto; max-height: calc(92vh - 110px); margin: 0 auto; }
body.page-code-file .cfad-details-head { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--c-primary, #001f3f), var(--c-secondary, #003366)); color: #fff; padding: 15px 20px; }
body.page-code-file .cfad-details-head i { color: #7fd1ff; font-size: 19px; }
body.page-code-file .cfad-details-head h3 { margin: 0; font-size: 17px; flex: 1; }
body.page-code-file .cfad-points { list-style: none; margin: 0; padding: 18px 22px; overflow-y: auto; }
body.page-code-file .cfad-points li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed rgba(0,31,63,.1); font-size: 14.5px; line-height: 1.6; color: #334155; }
body.page-code-file .cfad-points li:last-child { border-bottom: none; }
body.page-code-file .cfad-points li i { color: var(--c-accent); margin-top: 4px; flex-shrink: 0; }
body.page-code-file .cfad-details-foot { padding: 14px 22px 18px; border-top: 1px solid rgba(0,31,63,.1); text-align: center; }
body.page-code-file .cfad-details-foot a { display: inline-flex; align-items: center; gap: 8px; background: var(--c-support, #25D366); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 12px 26px; border-radius: 10px; }
body.page-code-file .cfad-close-btn { display: inline-flex; align-items: center; gap: 7px; background: #f1f5f9; color: #334155; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: all .15s; touch-action: manipulation; }
body.page-code-file .cfad-close-btn:hover { background: #e2e8f0; }
@media (max-width: 768px) {
body.page-code-file .cfad-modal { width: 94%; }
body.page-code-file .cfad-overlay { padding: 10px; }
body.page-code-file #cfadPopup .cfad-modal { min-width: 0; max-width: 94vw; }
body.page-code-file #cfadPopup .cfad-img img { max-height: calc(88vh - 150px); }
body.page-code-file .cfad-bar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
body.page-code-file .cfad-title { flex-basis: 100%; white-space: normal; font-size: 13.5px; }
body.page-code-file .cfad-wa, body.page-code-file .cfad-close-btn { flex: 1; justify-content: center; min-height: 44px; }
}

/* buyers also bought — co-purchase strip above the reviews (also_bought_lib.php), file page twins only */
body.page-code-file .cf-also{max-width:960px;margin:38px auto 0;padding:0 18px;content-visibility:auto;contain-intrinsic-size:auto 340px;}
body.page-code-file .cf-also-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
body.page-code-file .cf-also-head h2{margin:0;display:flex;align-items:center;gap:11px;font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--c-primary);}
body.page-code-file .cf-also-head h2 i{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--c-tint);color:var(--c-accent);font-size:17px;}
body.page-code-file .cf-also-head p{margin:0 0 0 49px;font-size:13px;font-weight:600;color:#475569;}
body.page-code-file .cf-also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
body.page-code-file .cf-also-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--c-tint-line);border-radius:var(--radius-md,12px);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s;}
body.page-code-file .cf-also-card:hover{border-color:var(--c-accent);box-shadow:0 10px 26px rgba(var(--c-primary-rgb),.12);transform:translateY(-2px);}
body.page-code-file .cf-also-thumb{display:block;aspect-ratio:16/9;background:var(--c-primary);overflow:hidden;}
body.page-code-file .cf-also-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
body.page-code-file .cf-also-nothumb{display:flex;align-items:center;justify-content:center;color:var(--c-tint);font-size:34px;}
body.page-code-file .cf-also-body{display:flex;flex-direction:column;gap:9px;padding:12px 14px 14px;flex:1;}
body.page-code-file .cf-also-name{font-size:14px;font-weight:700;line-height:1.35;color:#0f172a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-code-file .cf-also-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap;}
body.page-code-file .cf-also-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:0;background:var(--c-tint);color:var(--c-accent);white-space:nowrap;}
body.page-code-file .cf-also-price{font-size:15px;font-weight:800;color:var(--c-primary);letter-spacing:-.01em;white-space:nowrap;}
body.page-code-file .cf-also-price small{font-size:10.5px;font-weight:700;color:#475569;letter-spacing:.04em;}
/* also-bought inside the sticky right rail (desktop, moved there by rsAlsoBoughtRail) — compact single-column cards */
body.page-code-file .checkout-right .cf-also.cf-also-rail{max-width:none;margin:16px 0 0;padding:0;content-visibility:visible;contain-intrinsic-size:auto;}
body.page-code-file .cf-also-rail .cf-also-head{margin-bottom:10px;}
body.page-code-file .cf-also-rail .cf-also-head h2{font-size:15px;gap:8px;}
body.page-code-file .cf-also-rail .cf-also-head h2 i{width:28px;height:28px;flex-basis:28px;font-size:13px;border-radius:8px;}
body.page-code-file .cf-also-rail .cf-also-head p{margin-left:36px;font-size:12px;}
body.page-code-file .cf-also-rail .cf-also-grid{grid-template-columns:1fr;gap:10px;}
body.page-code-file .cf-also-rail .cf-also-card{flex-direction:row;align-items:center;}
body.page-code-file .cf-also-rail .cf-also-card:hover{transform:none;}
body.page-code-file .cf-also-rail .cf-also-thumb{flex:0 0 104px;width:104px;aspect-ratio:16/9;}
body.page-code-file .cf-also-rail .cf-also-nothumb{font-size:22px;}
body.page-code-file .cf-also-rail .cf-also-body{padding:8px 10px;gap:5px;min-width:0;}
body.page-code-file .cf-also-rail .cf-also-name{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.page-code-file .cf-also-rail .cf-also-meta{gap:6px;flex-wrap:wrap;}
/* co-purchase social proof — every number here is computed from sales / page views, never invented */
body.page-code-file .cf-also-cue{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#475569;letter-spacing:.01em;}
body.page-code-file .cf-also-cue i{font-size:10px;color:var(--c-accent);}
body.page-code-file .cf-also-cue.hot{color:#166534;}
body.page-code-file .cf-also-cue.hot i{color:#16a34a;}
body.page-code-file .cf-also-card{position:relative;}
body.page-code-file .cf-also-card.is-top{border-color:var(--c-accent);box-shadow:0 8px 22px rgba(var(--c-accent-rgb),.16);}
body.page-code-file .cf-also-top{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--c-primary);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 4px 12px rgba(var(--c-primary-rgb),.3);}
body.page-code-file .cf-also-top i{color:#fbbf24;font-size:9px;}
body.page-code-file .cf-also-rail .cf-also-top{top:6px;left:6px;font-size:9.5px;padding:2px 7px;}
body.page-code-file .cf-also-rail .cf-also-cue{font-size:11px;}
/* related files inside the rail — flat (no card shell), compact rows, video button hidden to save height */
body.page-code-file .checkout-right .related-files-section.cf-rel-rail{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:18px 0 0;content-visibility:visible;contain-intrinsic-size:auto;}
body.page-code-file .cf-rel-rail h2{font-size:15px;gap:8px;margin:0 0 10px;}
body.page-code-file .cf-rel-rail h2 i{font-size:15px;}
body.page-code-file .cf-rel-rail .related-files-grid{grid-template-columns:1fr;gap:10px;}
body.page-code-file .cf-rel-rail .rf-card{flex-direction:row;border-radius:var(--radius-md,12px);}
body.page-code-file .cf-rel-rail .rf-card:hover{transform:none;}
body.page-code-file .cf-rel-rail .rf-card-link{flex-direction:row;align-items:center;min-width:0;}
body.page-code-file .cf-rel-rail .rf-thumb{flex:0 0 104px;width:104px;aspect-ratio:16/9;}
body.page-code-file .cf-rel-rail .rf-body{padding:8px 10px;gap:5px;min-width:0;}
body.page-code-file .cf-rel-rail .rf-title{font-size:13px;-webkit-line-clamp:2;}
body.page-code-file .cf-rel-rail .rf-meta{gap:5px;}
body.page-code-file .cf-rel-rail .rf-watch{display:none;}
body.page-code-file .cf-rel-rail .related-files-more{margin-top:12px;}
body.page-code-file .cf-rel-rail .related-files-more a{padding:9px 18px;font-size:13px;}
body.page-code-file .rf-price{display:flex;align-items:baseline;gap:5px;margin-top:2px;}
body.page-code-file .rf-amt{font-size:15px;font-weight:800;color:var(--c-primary);letter-spacing:-.01em;}
body.page-code-file .rf-price small{font-size:10.5px;font-weight:700;color:#94a3b8;letter-spacing:.04em;}
body.page-code-file .rf-amt-soft{font-size:12.5px;font-weight:700;color:var(--c-accent);}
body.page-code-file .rf-free{display:inline-flex;align-items:center;gap:5px;background:#dcfce7;color:#166534;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:.02em;}
body.page-code-file .rf-free i{font-size:10px;}
body.page-code-file .cf-rel-rail .rf-amt{font-size:14px;}
/* floating "customize" shortcut — bottom-left, scrolls to the Need This Customized card (rsCfCustomFab) */
body.page-code-file .cf-fab{position:fixed;left:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 16px 0 10px;background:var(--c-primary);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;border-radius:999px;box-shadow:0 10px 26px rgba(var(--c-primary-rgb),.28);transition:transform .18s,box-shadow .18s;}
body.page-code-file .cf-fab i{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--c-accent);border-radius:50%;font-size:13px;}
body.page-code-file .cf-fab:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--c-primary-rgb),.34);color:#fff;}
body.page-code-file .cf-fab[hidden]{display:none;}
body.page-code-file .cf-custom-flash{animation:cfCustomFlash 1.6s ease;}
@media (prefers-reduced-motion:reduce){body.page-code-file .cf-custom-flash{animation:none;}}
@media (max-width:768px){body.page-code-file .cf-fab{left:12px;bottom:calc(var(--cf-action-bar-h,76px) + var(--ph-bottom-nav-h,0px) + 14px);height:44px;width:44px;padding:0;justify-content:center;}body.page-code-file .cf-fab span{display:none;}body.page-code-file .cf-fab i{width:auto;height:auto;background:none;font-size:16px;}}
@media (max-width:600px){body.page-code-file .cf-also{padding:0 12px;margin-top:28px;}body.page-code-file .cf-also-head h2{font-size:18px;}body.page-code-file .cf-also-head p{margin-left:0;}body.page-code-file .cf-also-grid{grid-template-columns:1fr;gap:10px;}body.page-code-file .cf-also-card{flex-direction:row;align-items:stretch;}body.page-code-file .cf-also-thumb{flex:0 0 128px;width:128px;aspect-ratio:auto;}body.page-code-file .cf-also-body{padding:10px 12px;}body.page-code-file .cf-also-name{font-size:13px;}body.page-code-file .cf-also-chip{font-size:12px;}}
@media (prefers-reduced-motion:reduce){body.page-code-file .cf-also-card{transition:none;}body.page-code-file .cf-also-card:hover{transform:none;}}

/* the phone section rail is built by code_file.js on every viewport — its layout lives in the
   mobile block below, so everywhere else it stays out of the flow */
body.page-code-file .cf-rail { display: none; }

/* the shared header is hidden 769-820px as well; this page keeps it (minus the four nav links,
   which the bottom nav carries) so the top of the page never goes blank on a small tablet */
@media (min-width: 769px) and (max-width: 820px) {
  body.page-code-file .ph-header { display: block; }
  body.page-code-file .ph-nav-links { display: none !important; }
}

/* ==========================================================================================
   code_file.php — LUXURY MOBILE LAYER (LAST on purpose: wins the cascade at equal specificity)
   phones only. the stacked boxes become one calm product page: media, title, a single buy module,
   hairline ledgers instead of tinted boxes, snap carousels for related items. colours come from the
   live theme tokens only; the subscribe banner keeps its owner-fixed palette. no markup, no logic.
   ========================================================================================== */
@media (max-width: 768px) {
  body.page-code-file {
    --lx-ink: var(--c-text, #1a1a1a);
    --lx-muted: var(--c-text-muted, #6b7280);
    --lx-line: rgba(var(--c-primary-rgb), .10);
    --lx-r: 22px;
    --lx-r-sm: 14px;
    --lx-shadow: 0 18px 44px -22px rgba(var(--c-primary-rgb), .28);
    --lx-head: var(--font-family-base);
  }
  body.page-code-file .container { width: 100% !important; max-width: 100% !important; padding: 16px max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left)) !important; }
  body.page-code-file .checkout-grid { gap: 20px; margin: 0; }

  /* ---- title: no box, editorial type, quiet chips ---- */
  body.page-code-file .file-header { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 0 2px !important; margin-bottom: 14px !important; }
  body.page-code-file .file-header h1 { font-family: var(--lx-head); font-size: 27px !important; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; color: var(--c-primary); margin: 0 0 12px !important; }
  body.page-code-file .file-meta { display: flex; flex-wrap: wrap; gap: 6px; }
  body.page-code-file .file-meta .badge { background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px !important; border-radius: 999px !important; box-shadow: none !important; line-height: 1.2; }
  body.page-code-file .file-meta .badge.code-badge { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color: var(--c-on-primary, #fff) !important; }
  body.page-code-file .file-meta .badge.plan-badge { border-color: rgba(var(--c-accent-rgb), .35) !important; color: var(--c-accent-strong, var(--c-accent)) !important; }

  /* ---- the two banners under the title: keep colours, lose the weight ---- */
  body.page-code-file .subscribers-milestone-banner { border-radius: var(--lx-r-sm) !important; box-shadow: none !important; padding: 12px 14px !important; margin: 0 0 12px !important; }
  body.page-code-file .subscribers-milestone-banner .milestone-emoji { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 18px !important; box-shadow: none !important; }
  body.page-code-file .subscribers-milestone-banner .milestone-main { font-size: 15px !important; }
  body.page-code-file .subscribers-milestone-banner .milestone-sub { font-size: 12.5px !important; line-height: 1.45 !important; }
  body.page-code-file .subscribers-milestone-banner .subscribe-btn { padding: 10px 16px !important; font-size: 13.5px !important; box-shadow: none !important; }
  body.page-code-file .file-prompt-section.ai-unlock { background: var(--c-card) !important; border: 1px solid var(--lx-line) !important; border-radius: var(--lx-r-sm) !important; box-shadow: none !important; padding: 12px 14px !important; margin: 0 0 18px !important; }
  body.page-code-file .ai-unlock .ai-ico { width: 38px !important; height: 38px !important; border-radius: 999px !important; background: var(--c-tint) !important; color: var(--c-primary) !important; font-size: 16px !important; box-shadow: none !important; }
  body.page-code-file .ai-unlock .ai-unlock-info strong { font-size: 14.5px !important; font-weight: 700 !important; }
  body.page-code-file .ai-unlock .ai-free-badge { background: transparent !important; color: var(--c-accent-strong, var(--c-accent)) !important; border: 1px solid rgba(var(--c-accent-rgb), .35); padding: 2px 8px !important; border-radius: 999px !important; font-size: 10px !important; }
  body.page-code-file .ai-unlock .ai-unlock-info small { font-size: 12.5px !important; color: var(--lx-muted) !important; }
  body.page-code-file .ai-unlock .ai-actions { width: 100%; margin-top: 4px; }
  body.page-code-file .ai-unlock .ai-open { flex: 1; justify-content: center; background: var(--c-accent) !important; color: var(--c-on-accent, #fff) !important; border-radius: 999px !important; padding: 11px 16px !important; font-size: 14px !important; box-shadow: none !important; }
  body.page-code-file .ai-unlock .ai-how { border-radius: 999px !important; padding: 11px 14px !important; border-color: var(--lx-line) !important; color: var(--c-primary) !important; font-size: 13px !important; }

  /* ---- media ---- */
  body.page-code-file .checkout-video-wrap { border-radius: var(--lx-r) !important; box-shadow: var(--lx-shadow); margin: 0 0 4px; }
  body.page-code-file .checkout-video-wrap iframe { border-radius: var(--lx-r) !important; }

  /* ---- the buy module: one card, one price, one button, ledgers under it ---- */
  body.page-code-file .checkout-sidebar { background: var(--c-card) !important; border: 1px solid var(--lx-line) !important; border-radius: var(--lx-r) !important; box-shadow: var(--lx-shadow) !important; overflow: hidden; }
  body.page-code-file .checkout-sidebar-header { background: transparent !important; color: var(--lx-muted) !important; padding: 18px 20px 0 !important; }
  body.page-code-file .checkout-sidebar-header span { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; opacity: 1 !important; color: var(--lx-muted) !important; }
  body.page-code-file .checkout-sidebar-body { padding: 10px 20px 20px !important; }
  body.page-code-file .sidebar-price-box { padding: 0 !important; text-align: left !important; }
  body.page-code-file .sidebar-disc-strip { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 10px; margin: 0 0 2px !important; }
  body.page-code-file .sidebar-disc-strip s { color: var(--lx-muted) !important; font-size: 13.5px !important; font-weight: 500 !important; }
  body.page-code-file .sidebar-disc-badge { background: rgba(var(--c-accent-rgb), .10) !important; color: var(--c-accent-strong, var(--c-accent)) !important; border: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; padding: 3px 9px !important; border-radius: 999px !important; box-shadow: none !important; }
  body.page-code-file .sidebar-price-main { font-family: var(--lx-head); font-size: 40px !important; line-height: 1 !important; letter-spacing: -.035em !important; font-weight: 700 !important; color: var(--c-primary) !important; text-align: left !important; margin: 0 !important; }
  body.page-code-file .sidebar-price-sub { text-align: left !important; font-size: 13px !important; color: var(--lx-muted) !important; margin-top: 6px !important; font-weight: 500 !important; }
  body.page-code-file .sidebar-disc-why { display: inline-flex !important; align-items: center; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 10px 0 0 !important; margin: 0 !important; color: var(--lx-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; }
  body.page-code-file .disc-timer { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 0 0 !important; margin: 12px 0 0 !important; }
  body.page-code-file .disc-timer-head { color: var(--lx-muted) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; text-align: left; }
  body.page-code-file .disc-timer-head i { color: var(--c-accent) !important; }
  body.page-code-file .disc-timer-cells { display: flex !important; align-items: center; gap: 3px !important; justify-content: flex-end; }
  body.page-code-file .dt-cell { display: inline-flex !important; flex-direction: column; align-items: center; min-width: 34px !important; padding: 5px 4px !important; background: var(--c-primary) !important; color: var(--c-on-primary, #fff) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; font-family: var(--lx-head); }
  body.page-code-file .dt-cell small { font-size: 8px !important; letter-spacing: .08em; text-transform: uppercase; opacity: .7 !important; margin-top: 2px; }
  body.page-code-file .dt-sep { color: var(--lx-muted) !important; font-weight: 600 !important; }
  body.page-code-file #rsPriceBox > div:last-child:not(.disc-timer):not(.sidebar-disc-why) { font-size: 12.5px; color: var(--lx-muted); margin-top: 10px; text-align: left; }
  body.page-code-file .promo-box { margin: 16px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
  body.page-code-file .promo-input-row { display: flex !important; gap: 8px !important; }
  body.page-code-file .promo-code-field { flex: 1; min-width: 0; height: 46px !important; border: 1px solid var(--lx-line) !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 15px !important; background: var(--c-bg) !important; box-shadow: none !important; }
  body.page-code-file .promo-apply-btn { height: 46px !important; padding: 0 18px !important; border: 0 !important; border-radius: 12px !important; background: var(--c-primary) !important; background-image: none !important; color: var(--c-on-primary, #fff) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; }
  body.page-code-file .sidebar-trust-strip { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 0 0 !important; margin: 4px 0 0 !important; color: var(--lx-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; justify-content: flex-start !important; gap: 8px !important; }
  body.page-code-file .sidebar-trust-strip .stars i { color: var(--c-accent) !important; font-size: 11px !important; }
  body.page-code-file .sidebar-divider { border: 0 !important; border-top: 1px solid var(--lx-line) !important; margin: 14px 0 4px !important; height: 0 !important; background: transparent !important; }
  body.page-code-file .sidebar-feature-list { margin: 0 !important; padding: 0 !important; list-style: none; }
  body.page-code-file .sidebar-feature-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--lx-line); font-size: 14px !important; line-height: 1.5; color: var(--lx-ink) !important; }
  body.page-code-file .sidebar-feature-list li:last-child { border-bottom: 0; }
  body.page-code-file .sidebar-feature-list li i { color: var(--c-accent) !important; font-size: 12px !important; margin-top: 4px; flex: none; }
  body.page-code-file .sidebar-license-note { background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 0 !important; margin: 4px 0 0 !important; }
  body.page-code-file .license-note-head { font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--lx-muted) !important; font-weight: 600 !important; margin: 0 0 6px !important; }
  body.page-code-file .license-note-head i { color: var(--c-accent) !important; }
  body.page-code-file .sidebar-license-note p { font-size: 13.5px !important; line-height: 1.6 !important; color: var(--lx-muted) !important; }
  body.page-code-file .order-summary-box { background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 0 !important; margin: 14px 0 0 !important; }
  body.page-code-file .order-summary-box .summary-row { display: flex; justify-content: space-between; font-size: 13.5px !important; color: var(--lx-muted) !important; padding: 4px 0 !important; }
  body.page-code-file .order-summary-box .summary-total { border-top: 0 !important; margin: 0 !important; padding: 6px 0 !important; font-family: var(--lx-head); font-size: 18px !important; color: var(--c-primary) !important; font-weight: 700 !important; }
  body.page-code-file .cf-prompt-wrap { display: flex; gap: 8px; margin: 16px 0 0 !important; }
  body.page-code-file .cf-prompt-cta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--c-bg) !important; border: 1px solid var(--lx-line) !important; border-radius: 14px !important; padding: 10px 12px !important; box-shadow: none !important; text-decoration: none; }
  body.page-code-file .cf-prompt-ic { width: 34px !important; height: 34px !important; flex: none; border-radius: 10px !important; background: var(--c-primary) !important; color: var(--c-on-primary, #fff) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 14px !important; }
  body.page-code-file .cf-prompt-txt strong { font-size: 13px !important; color: var(--lx-ink) !important; }
  body.page-code-file .cf-prompt-txt small { font-size: 11.5px !important; color: var(--lx-muted) !important; }
  body.page-code-file .cf-prompt-go { color: var(--c-accent-strong, var(--c-accent)) !important; font-size: 12.5px !important; font-weight: 700 !important; }
  body.page-code-file .cf-prompt-how { width: 46px !important; flex: none; border: 1px solid var(--lx-line) !important; border-radius: 14px !important; background: var(--c-card) !important; color: var(--c-primary) !important; box-shadow: none !important; }
  body.page-code-file #checkoutForm { margin-top: 16px; }
  body.page-code-file #checkoutForm .method-pay-btn { margin-top: 14px; }
  body.page-code-file .method-pay-btn { min-height: 56px; border-radius: 999px !important; background: var(--c-accent) !important; background-image: none !important; box-shadow: 0 16px 30px -14px rgba(var(--c-accent-rgb), .7) !important; border: 0 !important; }
  body.page-code-file .method-pay-btn .mpb-logo { background: rgba(255, 255, 255, .16) !important; border-right: 1px solid rgba(255, 255, 255, .22) !important; padding: 0 16px !important; display: flex; align-items: center; }
  body.page-code-file .method-pay-btn .mpb-logo, body.page-code-file .method-pay-btn .mpb-logo i { color: var(--c-on-accent, #fff) !important; font-size: 15px !important; font-weight: 700 !important; }
  body.page-code-file .method-pay-btn .mpb-body { flex: 1; justify-content: center; align-items: center; padding: 14px 16px !important; color: var(--c-on-accent, #fff) !important; }
  body.page-code-file .method-pay-btn .mpb-main { font-family: var(--lx-head); font-size: 16px !important; font-weight: 700 !important; letter-spacing: .01em !important; color: var(--c-on-accent, #fff) !important; }
  body.page-code-file .pk-card-note { margin: 10px 0 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--lx-muted) !important; text-align: center; line-height: 1.5; }
  body.page-code-file .pk-card-note i { color: var(--c-accent) !important; }
  body.page-code-file .other-methods-list { display: flex !important; flex-direction: column !important; gap: 0 !important; margin-top: 18px !important; }
  body.page-code-file .other-methods-list > div:first-child:not(.other-methods-heading) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 8px !important; margin: 0 !important; color: var(--lx-muted) !important; font-size: 12.5px !important; font-weight: 500 !important; text-align: left; border-radius: 0 !important; }
  body.page-code-file .other-methods-list > div:first-child:not(.other-methods-heading) i { color: var(--c-accent) !important; }
  body.page-code-file .other-methods-heading { font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--lx-muted) !important; font-weight: 600 !important; margin: 10px 0 0 !important; padding: 0 0 4px !important; }
  body.page-code-file .other-methods-heading i { color: var(--c-accent) !important; }
  body.page-code-file .other-method-btn { display: flex !important; align-items: center; justify-content: space-between; width: 100%; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 13px 0 !important; margin: 0 !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--lx-ink) !important; text-align: left; }
  body.page-code-file .other-method-btn:last-of-type { border-bottom: 0 !important; }
  body.page-code-file .other-method-btn > span:first-child { display: inline-flex; align-items: center; gap: 12px !important; min-width: 0; }
  body.page-code-file .other-method-btn > span:first-child i { color: var(--c-primary) !important; font-size: 16px !important; width: 22px !important; text-align: center; }
  body.page-code-file .other-method-btn small { color: var(--lx-muted) !important; font-weight: 500 !important; font-size: 12px !important; }
  body.page-code-file .other-method-price { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-family: var(--lx-head); font-size: 14.5px !important; font-weight: 700 !important; color: var(--c-primary) !important; white-space: nowrap; flex: none; }
  body.page-code-file .omp-was { color: var(--lx-muted) !important; font-weight: 400 !important; font-size: 12px !important; margin-right: 6px; font-family: var(--font-family-base); }
  body.page-code-file .sidebar-payment-logos { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 14px 0 0 !important; margin: 6px 0 0 !important; justify-content: center !important; gap: 14px !important; opacity: .55; filter: grayscale(1); }
  body.page-code-file .sidebar-payment-logos span { font-size: 22px !important; }
  body.page-code-file .sidebar-trust-bar { background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important; padding: 12px 0 0 !important; margin: 12px 0 0 !important; justify-content: center !important; gap: 14px !important; flex-wrap: wrap; }
  body.page-code-file .sidebar-trust-bar span { color: var(--lx-muted) !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .02em; }
  body.page-code-file .sidebar-trust-bar span i { color: var(--c-accent) !important; }

  /* ---- description, features, what you get: ledgers, not boxes ---- */
  body.page-code-file .video-desc-acc { background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; margin: 24px 0 0 !important; padding: 0 !important; }
  body.page-code-file .vda-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent !important; border: 0 !important; padding: 16px 0 !important; font-family: var(--lx-head); font-size: 17px !important; font-weight: 600 !important; color: var(--c-primary) !important; }
  body.page-code-file .vda-ttl i { color: var(--lx-muted) !important; font-size: 14px !important; margin-right: 8px; }
  body.page-code-file .vda-icon { color: var(--lx-muted) !important; }
  body.page-code-file .vda-body { padding: 0 0 16px !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--lx-muted) !important; }
  body.page-code-file .cf-features { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 26px 0 0 !important; }
  body.page-code-file .cf-features h3 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em; color: var(--c-primary) !important; margin: 0 0 8px !important; }
  body.page-code-file .cf-desc { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 26px 0 0 !important; }
  body.page-code-file .cf-desc-sec h3 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em; color: var(--c-primary) !important; margin: 0 0 8px !important; }
  body.page-code-file .cf-desc-list { grid-template-columns: 1fr !important; }
  body.page-code-file .cf-features h3 i { color: var(--lx-muted) !important; font-size: 14px !important; }
  body.page-code-file .cf-features-grid { grid-template-columns: 1fr 1fr !important; column-gap: 18px !important; row-gap: 0 !important; }
  body.page-code-file .cf-feat { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 11px 0 !important; min-height: 0 !important; gap: 10px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--lx-ink) !important; line-height: 1.4 !important; }
  body.page-code-file .cf-feat-ic { width: 20px !important; height: 20px !important; border-radius: 999px !important; background: rgba(var(--c-accent-rgb), .12) !important; color: var(--c-accent-strong, var(--c-accent)) !important; font-size: 9px !important; box-shadow: none !important; }
  body.page-code-file .cf-fileinfo-card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 26px 0 0 !important; }
  body.page-code-file .cf-fileinfo-card h3 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em; line-height: 1.25; color: var(--c-primary) !important; margin: 0 0 10px !important; }
  body.page-code-file .cf-fileinfo-card h3 i { color: var(--lx-muted) !important; font-size: 14px !important; }
  body.page-code-file .cf-fileinfo-card > div span { background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px !important; border-radius: 999px !important; }
  body.page-code-file .cf-fileinfo-card h4 { font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--lx-muted) !important; font-weight: 600 !important; margin: 20px 0 2px !important; }
  body.page-code-file .cf-fileinfo-card h4 i { color: var(--c-accent) !important; }
  body.page-code-file .what-you-get-table { margin-top: 4px !important; }
  body.page-code-file .what-you-get-table td { padding: 12px 0 !important; font-size: 14px !important; line-height: 1.5; border-bottom: 1px solid var(--lx-line) !important; vertical-align: top; text-align: left !important; }
  body.page-code-file .what-you-get-table td:first-child { width: 44%; padding-right: 12px !important; color: var(--c-primary) !important; font-weight: 600 !important; white-space: normal !important; }
  body.page-code-file .what-you-get-table td:first-child i { color: var(--c-accent) !important; width: 18px; margin-right: 6px; text-align: center; }
  body.page-code-file .what-you-get-table td:last-child { color: var(--lx-muted) !important; }
  body.page-code-file .what-you-get-table tr:last-child td { border-bottom: 0 !important; }

  /* ---- related files: a snap carousel of product cards ---- */
  body.page-code-file .related-files-section { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 30px 0 0 !important; }
  body.page-code-file .related-files-section h2 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em; color: var(--c-primary) !important; margin: 0 0 12px !important; }
  body.page-code-file .related-files-section h2 i { color: var(--lx-muted) !important; font-size: 15px !important; }
  body.page-code-file .related-files-grid { display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 20px; padding: 6px 20px 14px; margin: 0 -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.page-code-file .related-files-grid::-webkit-scrollbar { display: none; }
  body.page-code-file .rf-card { flex: 0 0 76% !important; max-width: 300px; scroll-snap-align: start; display: flex !important; flex-direction: column !important; background: var(--c-card) !important; border: 1px solid var(--lx-line) !important; border-radius: 18px !important; box-shadow: var(--lx-shadow) !important; overflow: hidden; }
  body.page-code-file .rf-card-link { display: flex !important; flex-direction: column !important; flex: 1; }
  body.page-code-file .rf-thumb { width: 100% !important; flex: none !important; aspect-ratio: 16 / 9 !important; height: auto !important; border-radius: 0 !important; }
  body.page-code-file .rf-body { padding: 12px 14px 8px !important; gap: 8px !important; }
  body.page-code-file .rf-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--lx-ink) !important; }
  body.page-code-file .rf-meta { gap: 6px !important; }
  body.page-code-file .rf-badge, body.page-code-file .rf-cat { background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .04em; padding: 3px 8px !important; border-radius: 999px !important; }
  body.page-code-file .rf-watch { background: transparent !important; color: var(--c-primary) !important; border: 1px solid var(--lx-line) !important; border-radius: 999px !important; margin: 2px 14px 14px !important; padding: 9px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important; }
  body.page-code-file .rf-watch i { color: #ff0000; }
  body.page-code-file .related-files-more { margin-top: 4px !important; }
  body.page-code-file .related-files-more a { background: transparent !important; color: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; border-radius: 999px !important; padding: 11px 22px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; }

  /* ---- custom work: editorial block with a stats ledger ---- */
  body.page-code-file .cf-custom-card { background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 0 0 !important; margin: 32px 0 0 !important; }
  body.page-code-file .cf-custom-card > div:first-child { text-align: left !important; margin-bottom: 18px !important; }
  body.page-code-file .cf-custom-card > div:first-child > div:first-child { background: transparent !important; color: var(--lx-muted) !important; padding: 0 !important; margin: 0 0 8px !important; border-radius: 0 !important; box-shadow: none !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; line-height: 1.5 !important; justify-content: flex-start !important; }
  body.page-code-file .cf-custom-card > div:first-child > div:first-child i { color: var(--c-accent) !important; }
  body.page-code-file .cf-custom-card h3 { font-family: var(--lx-head); font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; text-align: left !important; color: var(--c-primary) !important; margin: 0 0 8px !important; }
  body.page-code-file .cf-custom-card h3 i { color: var(--lx-muted) !important; font-size: 16px !important; }
  body.page-code-file .cf-custom-card > div:first-child p { text-align: left !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--lx-muted) !important; max-width: none !important; margin: 0 !important; }
  body.page-code-file .trust-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); margin: 0 0 22px !important; }
  body.page-code-file .trust-grid > div { background: transparent !important; border: 0 !important; border-right: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 8px !important; text-align: center; }
  body.page-code-file .trust-grid > div:nth-child(3n), body.page-code-file .trust-grid > div:last-child { border-right: 0 !important; }
  body.page-code-file .trust-grid > div:nth-child(n+4) { border-top: 1px solid var(--lx-line) !important; }
  body.page-code-file .trust-grid > div > div:first-child { font-family: var(--lx-head); font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--c-primary) !important; margin: 0 !important; }
  body.page-code-file .trust-grid > div > div:last-child { font-size: 10px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-muted) !important; font-weight: 500 !important; margin-top: 4px !important; }
  body.page-code-file .customize-grid { gap: 0 !important; }
  body.page-code-file .customize-grid > div { display: flex !important; align-items: flex-start; gap: 14px; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 !important; margin: 0 !important; }
  body.page-code-file .customize-grid > div:last-child { border-bottom: 0 !important; }
  body.page-code-file .customize-grid > div > div:first-child { width: 40px !important; height: 40px !important; min-width: 40px !important; flex: none; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 12px !important; background: var(--c-tint) !important; background-image: none !important; color: var(--c-primary) !important; font-size: 15px !important; box-shadow: none !important; }
  body.page-code-file .customize-grid > div > div:last-child > div:first-child { font-size: 15px !important; font-weight: 600 !important; color: var(--lx-ink) !important; margin: 0 0 2px !important; }
  body.page-code-file .customize-grid > div > div:last-child > div:last-child { font-size: 13px !important; line-height: 1.55 !important; color: var(--lx-muted) !important; }
  body.page-code-file .cf-custom-card .support-pair { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  body.page-code-file .cf-custom-card .btn-whatsapp { width: 100%; justify-content: center; background: var(--c-support, #25D366) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; padding: 15px 18px !important; box-shadow: none !important; }
  body.page-code-file .cf-custom-card .btn-whatsapp.sup-em { background: transparent !important; color: var(--c-primary) !important; border: 1px solid var(--c-primary) !important; }
  body.page-code-file .cf-custom-card .support-pair + p, body.page-code-file .cf-custom-card > div:last-child > p { font-size: 12px !important; line-height: 1.6; color: var(--lx-muted) !important; text-align: center; margin: 12px 0 0 !important; }

  /* ---- also bought, reviews, faq: same rhythm ---- */
  body.page-code-file .cf-also { padding: 0 20px !important; margin-top: 32px !important; }
  body.page-code-file .cf-also-head { gap: 2px !important; margin-bottom: 12px !important; }
  body.page-code-file .cf-also-head h2 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em !important; gap: 8px !important; }
  body.page-code-file .cf-also-head h2 i { width: auto !important; height: auto !important; flex: none !important; background: transparent !important; color: var(--lx-muted) !important; font-size: 15px !important; border-radius: 0 !important; }
  body.page-code-file .cf-also-head p { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--lx-muted) !important; }
  body.page-code-file .cf-also-grid { display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 20px; padding: 6px 20px 14px; margin: 0 -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body.page-code-file .cf-also-grid::-webkit-scrollbar { display: none; }
  body.page-code-file .cf-also-card { flex: 0 0 76% !important; max-width: 300px; scroll-snap-align: start; flex-direction: column !important; align-items: stretch !important; background: var(--c-card) !important; border: 1px solid var(--lx-line) !important; border-radius: 18px !important; box-shadow: var(--lx-shadow) !important; }
  body.page-code-file .cf-also-thumb { flex: none !important; width: 100% !important; aspect-ratio: 16 / 9 !important; }
  body.page-code-file .cf-also-body { padding: 12px 14px 14px !important; gap: 6px !important; }
  body.page-code-file .cf-also-name { font-size: 14px !important; font-weight: 600 !important; color: var(--lx-ink) !important; }
  body.page-code-file .cf-also-price { font-family: var(--lx-head); font-size: 15px !important; font-weight: 700 !important; }
  body.page-code-file .rsrev { padding: 0 20px !important; margin: 32px auto 20px !important; }
  body.page-code-file .rsrev-head h2 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em !important; gap: 8px !important; }
  body.page-code-file .rsrev-head h2 i { width: auto !important; height: auto !important; flex: none !important; background: transparent !important; color: var(--lx-muted) !important; font-size: 15px !important; border-radius: 0 !important; }
  body.page-code-file .rsrev-head p { font-size: 13px !important; font-weight: 500 !important; color: var(--lx-muted) !important; }
  body.page-code-file .rsrev-head > button, body.page-code-file .rsrev-head > a, body.page-code-file .rsrev-more { border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }
  body.page-code-file .rsrev-sum { grid-template-columns: 1fr !important; background: transparent !important; border: 0 !important; border-top: 1px solid var(--lx-line) !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; padding: 16px 0 !important; margin: 0 0 4px !important; }
  body.page-code-file .rsrev-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; padding: 14px 0 !important; margin: 0 !important; box-shadow: none !important; }
  body.page-code-file .rsffaq { padding: 0 20px !important; margin-top: 30px !important; }
  body.page-code-file .rsffaq h2 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em !important; }
  body.page-code-file .rsffaq-sub { font-size: 13px !important; color: var(--lx-muted) !important; font-weight: 500 !important; }

  /* ---- free-file branch shells: same skin, nothing inside them moves ---- */
  body.page-code-file #youtubeAuthSection, body.page-code-file #videoWatchSection, body.page-code-file #verifiedActionsSection, body.page-code-file .cf-faq-card, body.page-code-file .content-section, body.page-code-file .auth-section { border-radius: var(--lx-r) !important; border: 1px solid var(--lx-line) !important; box-shadow: var(--lx-shadow) !important; }
  body.page-code-file .gsc-btn { border-radius: 999px !important; background: var(--c-accent) !important; background-image: none !important; color: var(--c-on-accent, #fff) !important; box-shadow: none !important; }
  body.page-code-file .gsc-btn-demo, body.page-code-file .gsc-btn-hire { border-radius: 999px !important; box-shadow: none !important; }

  /* ---- sticky buy bar: frosted, one pill ---- */
  body.page-code-file .mobile-action-bar { background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--lx-line) !important; box-shadow: 0 -10px 30px rgba(var(--c-primary-rgb), .08) !important; padding-left: 20px !important; padding-right: 20px !important; }
  body.page-code-file .mab-info-main { font-family: var(--lx-head); font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.025em; color: var(--c-primary) !important; line-height: 1.1; }
  body.page-code-file .mab-info-sub { font-size: 11.5px !important; color: var(--lx-muted) !important; font-weight: 500 !important; }
  /* ---- polish ---- */
  body.page-code-file .promo-input-row { flex-direction: row !important; align-items: stretch; }
  body.page-code-file .promo-apply-btn { flex: none !important; width: auto !important; min-width: 0 !important; }
  body.page-code-file .disc-timer-head { flex: 1; min-width: 0; font-size: 11.5px !important; line-height: 1.3; }
  body.page-code-file .dt-cell { min-width: 32px !important; }
  body.page-code-file .other-method-btn > span:first-child { flex-wrap: wrap; row-gap: 1px !important; }
  body.page-code-file .other-method-btn small { flex-basis: 100%; padding-left: 34px; line-height: 1.3; }
  body.page-code-file .cf-prompt-ic { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  body.page-code-file .cf-prompt-txt strong { font-size: 12.5px !important; line-height: 1.25 !important; display: block; }
  body.page-code-file .cf-custom-card > div:first-child > div:first-child { border: 0 !important; }
  body.page-code-file .cf-custom-card .trust-grid > div > div:first-child { color: var(--c-primary) !important; }
  body.page-code-file .cf-custom-card > .trust-grid + div:not(.customize-grid) { text-align: left !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--lx-muted) !important; font-weight: 600 !important; margin: 0 0 2px !important; }
  body.page-code-file .cf-also-chip { background: transparent !important; border: 1px solid var(--lx-line) !important; color: var(--lx-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .04em; padding: 3px 8px !important; border-radius: 999px !important; }
  body.page-code-file .cf-also-chip i { color: var(--c-accent) !important; }
  body.page-code-file .rsrev-sub { font-size: 13px !important; color: var(--lx-muted) !important; font-weight: 500 !important; }
  body.page-code-file .rsrev-write-btn { background: var(--c-primary) !important; background-image: none !important; color: var(--c-on-primary, #fff) !important; border: 0 !important; border-radius: 999px !important; padding: 12px 18px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; }
  body.page-code-file .rsrev-score b { font-family: var(--lx-head); }
  body.page-code-file .rsffaq details { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--lx-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  body.page-code-file .rsffaq summary { padding: 14px 0 !important; background: transparent !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4; color: var(--c-primary) !important; }
  body.page-code-file .rsffaq-a { padding: 0 0 14px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--lx-muted) !important; }
  body.page-code-file .mab-btn { background: var(--c-accent) !important; background-image: none !important; color: var(--c-on-accent, #fff) !important; border: 0 !important; border-radius: 999px !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: 0 12px 26px -12px rgba(var(--c-accent-rgb), .7) !important; }

  /* ---- flow: product first. media, then title, then the buy module; promos sink below the details.
          the grid and its left column become `contents` so every block is a flex child of the
          container and can be ordered. fixed overlays inside them are out of flow, unaffected ---- */
  body.page-code-file .container { display: flex; flex-direction: column; }
  body.page-code-file .checkout-grid, body.page-code-file .checkout-grid > .checkout-left { display: contents !important; }
  body.page-code-file .container > * { order: 20; }
  /* every branch's player takes the same slot right under the title: .checkout-video-wrap on
     checkout, .video-container on the payment-off/free branches, .cf-novideo when there is no
     video at all. miss one and it falls into the default order:20 bucket at the foot of the page */
  body.page-code-file .video-container,
  body.page-code-file .checkout-video-wrap,
  body.page-code-file .cf-novideo { order: 2 !important; margin: 0 0 18px !important; }
  body.page-code-file .file-header { order: 1 !important; padding: 4px 0 0 !important; margin-bottom: 14px !important; }
  body.page-code-file .checkout-right { order: 3 !important; margin: 0 0 6px; }
  body.page-code-file #aiPromptBanner { order: 4 !important; margin: 14px 0 0 !important; }
  body.page-code-file #videoDescAcc { order: 5 !important; margin-top: 22px !important; }
  body.page-code-file .cf-features { order: 6 !important; margin-top: 30px !important; }
  body.page-code-file .cf-desc { order: 7 !important; margin-top: 30px !important; }
  body.page-code-file .cf-fileinfo-card { order: 8 !important; margin-top: 30px !important; }
  body.page-code-file #subscribeBanner { order: 9 !important; margin: 30px 0 0 !important; }
  body.page-code-file .cta-banner { order: 9 !important; margin: 30px 0 0 !important; }
  body.page-code-file .related-files-section { order: 10 !important; margin-top: 30px !important; }
  body.page-code-file .cf-custom-card { order: 11 !important; }

  /* title chips: one quiet row that scrolls, never a three-line wall */
  body.page-code-file .file-header h1 { font-size: 26px !important; margin: 0 0 10px !important; }
  body.page-code-file .file-meta { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  body.page-code-file .file-meta::-webkit-scrollbar { display: none; }
  body.page-code-file .file-meta .badge { flex: none; }
  body.page-code-file .file-meta { justify-content: flex-start !important; }

  /* support strip: keeps its fixed palette, drops to one line, sits after the details */
  body.page-code-file .subscribers-milestone-banner .milestone-content { display: flex; align-items: center; gap: 12px; }
  body.page-code-file .subscribers-milestone-banner .milestone-text { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  body.page-code-file .subscribers-milestone-banner .milestone-sub { display: none !important; }
  body.page-code-file .subscribers-milestone-banner .milestone-emoji { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 15px !important; }
  body.page-code-file .subscribers-milestone-banner .subscribe-btn { flex: none; white-space: nowrap; }

  /* buy module: price -> pay -> other ways -> reassurance -> the fine print */
  body.page-code-file .checkout-sidebar-body { display: flex; flex-direction: column; }
  body.page-code-file .checkout-sidebar-body > * { order: 50; }
  body.page-code-file .checkout-sidebar-body > .sidebar-price-box { order: 1; } /* by class — the id is absent on source_code.php and on any stale deploy, and then the box sank to order 50 */
  body.page-code-file .checkout-sidebar-body > #checkoutForm { order: 2; margin-top: 18px !important; }
  body.page-code-file .checkout-sidebar-body > .other-methods-list { order: 3; }
  body.page-code-file .checkout-sidebar-body > .sidebar-payment-logos { order: 4; }
  body.page-code-file .checkout-sidebar-body > .sidebar-trust-bar { order: 5; }
  body.page-code-file .checkout-sidebar-body > #rsCouponBox { order: 6; margin-top: 18px !important; }
  body.page-code-file .checkout-sidebar-body > .sidebar-trust-strip { order: 7; }
  body.page-code-file .checkout-sidebar-body > .sidebar-divider { order: 8; }
  body.page-code-file .checkout-sidebar-body > .sidebar-feature-list { order: 9; }
  body.page-code-file .checkout-sidebar-body > .sidebar-license-note { order: 10; }
  body.page-code-file .checkout-sidebar-body > #checkoutSummary { order: 11; }
  body.page-code-file .checkout-sidebar-body > .cf-prompt-wrap { order: 12; }
  /* the standalone AI banner sits right under the module on phones — the strip inside it would say the same thing twice */
  body.page-code-file .checkout-sidebar-body > .cf-prompt-wrap { display: none !important; }
  body.page-code-file #checkoutForm .method-pay-btn { margin-top: 0 !important; }

  /* the file-info block repeats the title and chips already shown at the top — on phones only the
     deliverables stay, and their label becomes the section heading */
  body.page-code-file .cf-fileinfo-card > h3, body.page-code-file .cf-fileinfo-card > div:first-of-type { display: none !important; }
  body.page-code-file .cf-fileinfo-card h4 { font-family: var(--lx-head); font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.015em !important; text-transform: none; color: var(--c-primary) !important; margin: 0 0 6px !important; }
  body.page-code-file .cf-fileinfo-card h4 i { color: var(--lx-muted) !important; font-size: 14px !important; }

  /* related cards: the watch link reads as a link, not a third button */
  body.page-code-file .rf-watch { border: 0 !important; padding: 0 !important; margin: 0 14px 14px !important; justify-content: flex-start !important; color: var(--lx-muted) !important; font-size: 12.5px !important; }

  /* sticky bar: lower, lighter */
  body.page-code-file .mobile-action-bar { padding-top: 8px !important; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
  body.page-code-file .mab-info-main { font-size: 20px !important; }
  body.page-code-file .mab-btn { padding: 12px 22px !important; min-height: 44px; }

  /* ---- section rail: the page is long on purpose, so give it a nav. fixed chips that slide in once
          the hero is behind you; the active one tracks the scroll and centres itself ---- */
  body.page-code-file .cf-rail {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1001; /* one over .ph-header, so the rail covers it exactly */
    transform: translateY(-102%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    background: #fff; background: color-mix(in srgb, var(--c-card, #fff) 94%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--lx-line); box-shadow: 0 14px 30px -24px rgba(var(--c-primary-rgb), .55);
  }
  body.page-code-file .cf-rail.is-on { transform: translateY(0); }
  body.page-code-file .cf-rail-track {
    display: flex; align-items: center; gap: 8px; min-height: var(--cf-bar-h); box-sizing: border-box;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
  }
  body.page-code-file .cf-rail-track::-webkit-scrollbar { display: none; }
  /* fade only the edge that still has chips behind it, so the active chip is never the dimmed one */
  body.page-code-file .cf-rail-track[data-edge="end"] { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  body.page-code-file .cf-rail-track[data-edge="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
  body.page-code-file .cf-rail-track[data-edge="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  body.page-code-file .cf-rail-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px;
    border: 1px solid var(--lx-line); border-radius: 999px; background: var(--c-card, #fff);
    font-family: var(--lx-head); font-size: 13px; font-weight: 600; line-height: 1; color: var(--lx-muted);
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  body.page-code-file .cf-rail-chip i { font-size: 12px; opacity: .75; }
  body.page-code-file .cf-rail-chip b { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--c-tint); color: var(--c-primary); }
  body.page-code-file .cf-rail-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary, #fff); }
  body.page-code-file .cf-rail-chip.is-active i { opacity: 1; }
  body.page-code-file .cf-rail-chip.is-active b { background: rgba(255, 255, 255, .22); color: var(--c-on-primary, #fff); }
  /* the rail must never sit on top of the thing it just jumped to */
  body.page-code-file .cf-sec { scroll-margin-top: calc(var(--cf-bar-h) + 13px); }
  @media (prefers-reduced-motion: reduce) { body.page-code-file .cf-rail { transition: none; } }

  /* ---- compat: nothing under 10px, no half-empty ledger row ---- */
  body.page-code-file .disc-timer small { font-size: 10px !important; letter-spacing: .04em; }
  body.page-code-file .file-meta .badge { font-size: 11px !important; }
  body.page-code-file .sidebar-disc-why, body.page-code-file .license-note-head, body.page-code-file .other-methods-heading { font-size: 11.5px !important; }
  body.page-code-file .cf-custom-card .trust-grid > :nth-child(5):last-child { grid-column: span 2; } /* 5 stats in a 3-wide ledger left a hole */

  /* ---- header: the shared bar is display:none below 820px site-wide (bottom nav replaces it).
          this page brings it back, compact and flat, and the section rail slides over it — so the
          top band is one strip either way, never two ---- */
  body.page-code-file .ph-header {
    display: block; padding: 0; z-index: 1000;
    background: #fff; background: color-mix(in srgb, var(--c-card, #fff) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--lx-line);
  }
  body.page-code-file { --cf-bar-h: 56px; } /* header and rail share it, so the rail covers the header exactly */
  body.page-code-file .ph-wrap { min-height: var(--cf-bar-h); padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right)); gap: 8px; }
  body.page-code-file .ph-pill { background: transparent; border: 0; box-shadow: none; }
  body.page-code-file .ph-logo { padding: 0; font-size: 15.5px; gap: 8px; }
  body.page-code-file .ph-logo img { width: 30px; height: 30px; }
  body.page-code-file .ph-nav-links { display: none !important; } /* four desktop links can't fit a phone row — the bottom nav carries them */
  body.page-code-file .ph-nav { padding: 0; gap: 2px; }
  body.page-code-file .ph-tool-btn { padding: 8px 9px; font-size: 15px; min-height: 40px; }
  body.page-code-file .ph-nav a.ph-login { padding: 9px 13px; margin: 0; font-size: 0; gap: 0; min-height: 40px; } /* icon only */
  body.page-code-file .ph-nav a.ph-login i { font-size: 14px; }
  body.page-code-file .ph-nav .lang-btn { min-height: 40px; } /* it lands in the header now, so it takes the touch floor too */

  /* ---- price block: the discount pill, the LIMITED OFFER label and the countdown all said the same
          thing on three stacked lines. money goes on one line so the pay button clears the fold ---- */
  body.page-code-file .checkout-sidebar-header { padding: 14px 18px 0 !important; }
  body.page-code-file .checkout-sidebar-header span:last-child { display: none; } /* file code already sits in the title chips */
  body.page-code-file .checkout-sidebar-body { padding: 8px 18px 18px !important; }
  body.page-code-file .sidebar-price-box { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  body.page-code-file .sidebar-price-box > * { order: 6; flex: 1 0 100%; } /* catch-all: unclassed extras (the USD note) sink to the bottom instead of leading */
  body.page-code-file .sidebar-price-main { order: 1; flex: 0 0 auto; font-size: 32px !important; }
  body.page-code-file .sidebar-disc-strip { order: 2; flex: 0 0 auto; margin: 0 !important; font-size: 13px !important; }
  body.page-code-file .sidebar-price-sub { order: 3; flex: 1 0 100%; margin-top: 2px !important; font-size: 12.5px !important; }
  body.page-code-file .sidebar-disc-why { order: 4; flex: 1 0 100%; padding: 7px 0 0 !important; font-size: 10px !important; }
  body.page-code-file .disc-timer { order: 5; flex: 1 0 100%; padding: 8px 0 0 !important; margin: 8px 0 0 !important; }

  /* ---- the sticky buy bar duplicates the in-card CTA; it stays tucked while that button is on screen ---- */
  body.page-code-file .mobile-action-bar { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
  body.page-code-file .mobile-action-bar.is-tucked { transform: translateY(calc(100% + var(--ph-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 14px)); pointer-events: none; } /* clears the bottom nav too, not just its own box */
  @media (prefers-reduced-motion: reduce) { body.page-code-file .mobile-action-bar { transition: none; } }

  /* ---- Regular License block: owner asked for colour and real containers here instead of the flat
          ledger. every value is a live palette token, so it still follows ui_setting ---- */
  body.page-code-file .checkout-sidebar-header {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary, var(--c-primary)) 100%) !important;
    color: var(--c-on-primary, #fff) !important; padding: 11px 16px !important;
  }
  body.page-code-file .checkout-sidebar-header span { color: var(--c-on-primary, #fff) !important; opacity: 1 !important; letter-spacing: .13em !important; }
  body.page-code-file .checkout-sidebar-header > div > span:first-child::before {
    content: "\f56c"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 8px; opacity: .85;
  }
  body.page-code-file .checkout-sidebar-body { padding: 12px 14px 16px !important; }

  /* the money and everything that argues for it sit in one tinted container */
  body.page-code-file .sidebar-price-box {
    background: linear-gradient(180deg, var(--c-tint-2) 0%, var(--c-card) 100%) !important;
    border: 1px solid var(--c-tint-line) !important; border-radius: var(--lx-r-sm) !important;
    padding: 12px 12px 10px !important;
  }
  body.page-code-file .sidebar-price-main { color: var(--c-primary) !important; }
  body.page-code-file .sidebar-disc-badge { background: var(--c-accent) !important; color: var(--c-on-accent, #fff) !important; border: 0 !important; padding: 4px 10px !important; border-radius: 999px !important; font-weight: 700 !important; }
  body.page-code-file .sidebar-disc-badge i { color: var(--c-on-accent, #fff) !important; }
  body.page-code-file .sidebar-price-sub { flex: 0 1 auto; }
  body.page-code-file .sidebar-disc-why {
    flex: 0 1 auto; margin: 0 0 0 auto !important; /* rides the end of the one-time-payment row, not its own */
    background: var(--c-tint) !important; border: 1px solid var(--c-tint-line) !important; border-radius: 999px !important;
    padding: 4px 9px !important; color: var(--c-primary) !important;
  }
  body.page-code-file .sidebar-disc-why i { color: var(--c-accent) !important; }
  /* the countdown gets a box of its own rather than a hairline rule */
  body.page-code-file .disc-timer {
    background: var(--c-tint-2) !important; border: 1px solid var(--c-tint-line) !important;
    border-radius: 12px !important; padding: 9px 9px !important; margin: 9px 0 0 !important;
  }
  body.page-code-file .disc-timer-head { color: var(--c-primary) !important; font-weight: 600 !important; font-size: 11px !important; } /* keeps it on one line inside the new box */
  body.page-code-file .disc-timer-head i { color: var(--c-accent) !important; }
  /* the usd line is the only inline-styled child in there, so [style] picks it without catching the timer */
  body.page-code-file .sidebar-price-box > div[style]:last-child {
    border-top: 1px solid var(--c-tint-line); padding: 8px 2px 0 !important;
    margin-top: 9px !important; color: var(--c-primary) !important;
  }

  /* ---- pay button: one whole button, not a brand panel welded onto a label ---- */
  body.page-code-file .method-pay-btn { justify-content: center !important; align-items: center !important; gap: 10px; min-height: 58px; padding: 0 18px !important; text-align: center; }
  body.page-code-file .method-pay-btn .mpb-logo { flex: 0 0 auto !important; background: transparent !important; border: 0 !important; border-right: 0 !important; padding: 0 !important; }
  body.page-code-file .method-pay-btn .mpb-logo img { max-height: 24px !important; background: #fff; border-radius: 6px; padding: 3px 7px; }
  body.page-code-file .method-pay-btn .mpb-body { flex: 0 0 auto !important; padding: 0 !important; }
  body.page-code-file .method-pay-btn .mpb-main { font-size: 17px !important; font-weight: 800 !important; }

  /* ---- other payment methods: every row IS a button, so it should look and feel like one.
          !important throughout because the .few variant outranks these selectors ---- */
  body.page-code-file .other-methods-list { gap: 8px !important; }
  body.page-code-file .other-method-btn {
    position: relative !important;
    background: var(--c-card) !important;
    border: 1px solid var(--c-tint-line) !important;
    border-radius: 14px !important;
    padding: 11px 38px 11px 11px !important;
    min-height: 60px !important;
    box-shadow: 0 1px 2px rgba(var(--c-primary-rgb), .05) !important;
    transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body.page-code-file .other-method-btn:last-of-type { border-bottom: 1px solid var(--c-tint-line) !important; }
  /* chevron: says "this opens something". drawn, so it needs no icon font */
  body.page-code-file .other-method-btn::after {
    content: "" !important; position: absolute !important; right: 16px !important; top: 50% !important;
    width: 7px !important; height: 7px !important; margin: 0 !important;
    border: 0 !important; border-right: 2px solid var(--c-primary) !important; border-bottom: 2px solid var(--c-primary) !important;
    transform: translateY(-50%) rotate(-45deg) !important; opacity: .35;
  }
  body.page-code-file .other-method-btn:active {
    transform: scale(.985); background: var(--c-tint) !important;
    border-color: var(--c-accent) !important; box-shadow: none !important;
  }
  body.page-code-file .other-method-btn:active::after { opacity: .95; border-right-color: var(--c-accent) !important; border-bottom-color: var(--c-accent) !important; }
  @media (hover: hover) {
    body.page-code-file .other-method-btn:hover { border-color: var(--c-accent) !important; box-shadow: 0 8px 20px -12px rgba(var(--c-accent-rgb), .7) !important; }
  }
  body.page-code-file .other-method-btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
  /* the icon becomes a tile, so the row reads as a card instead of a line of text */
  body.page-code-file .other-method-btn > span:first-child i {
    width: 38px !important; height: 38px; flex: 0 0 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-tint); border-radius: 10px; font-size: 15px !important;
  }
  body.page-code-file .other-method-btn small { padding-left: 50px; } /* clears the wider tile when it wraps */
  body.page-code-file .other-method-price { font-size: 15px !important; }
  /* the .few variant means "there are only one or two of these" — keep its emphasis, in the new card shape */
  body.page-code-file .other-methods-list.few .other-method-btn { border: 2px solid var(--c-accent) !important; background: var(--c-tint-2) !important; }
  @media (prefers-reduced-motion: reduce) {
    body.page-code-file .other-method-btn { transition: none; }
    body.page-code-file .other-method-btn:active { transform: none; }
  }
}

/* ==========================================================================================
   code_file.php — MOBILE READING PASS (after the luxury layer on purpose)
   ========================================================================================== */
@media (max-width: 768px) {
  /* need-customization wears the same shell as the purchase box — same card, border, radius, shadow */
  body.page-code-file .cf-custom-card { background: var(--c-card) !important; border: 1px solid var(--lx-line) !important; border-radius: var(--lx-r) !important; box-shadow: var(--lx-shadow) !important; overflow: hidden; padding: 20px !important; margin: 30px 0 0 !important; }
  body.page-code-file .cf-custom-card > div:first-child { margin-bottom: 16px !important; }
  body.page-code-file .cf-custom-card .trust-grid { margin: 0 0 18px !important; }
  body.page-code-file .cf-custom-card .customize-grid > div:last-child { border-bottom: 0 !important; }

  /* key features: one column reads, two columns wrap every phrase into a ragged stack */
  body.page-code-file .cf-features-grid { grid-template-columns: 1fr !important; }
  body.page-code-file .cf-feat { font-size: 14.5px !important; line-height: 1.5 !important; padding: 12px 0 !important; }
}

/* narrow phones: the what-you-get rows stop fighting over 44/56 and stack label over value */
@media (max-width: 480px) {
  body.page-code-file .what-you-get-table,
  body.page-code-file .what-you-get-table tbody,
  body.page-code-file .what-you-get-table tr { display: block; width: 100%; }
  body.page-code-file .what-you-get-table td { display: block; width: auto !important; padding: 0 !important; border-bottom: 0 !important; }
  body.page-code-file .what-you-get-table td:first-child { padding: 12px 0 2px !important; }
  body.page-code-file .what-you-get-table td:last-child { padding: 0 0 12px !important; border-bottom: 1px solid var(--lx-line) !important; font-size: 13.5px !important; }
  body.page-code-file .what-you-get-table tr:last-child td:last-child { border-bottom: 0 !important; }
}

/* ==========================================================================================
   code_file.php — ONE PAGE GUTTER (phones + tablets)
   .container and the body-level tail sections (also-bought, reviews, faq) are separate boxes that
   never share a parent, so their edges only line up if they read the same number. the env() half
   resolves to 0 while the page stays on the default viewport-fit (ios keeps the whole page inside
   the safe area itself) — it is there so the gutter is already correct if cover mode is ever set.
   ========================================================================================== */
@media (max-width: 992px) {
  body.page-code-file .container,
  body.page-code-file .cf-also,
  body.page-code-file .rsrev,
  body.page-code-file .rsffaq {
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }
}

/* small androids / iPhone SE — 20px eats too much of a 320-360px line */
@media (max-width: 380px) {
  body.page-code-file .container,
  body.page-code-file .cf-also,
  body.page-code-file .rsrev,
  body.page-code-file .rsffaq {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* the note is two sentences: methods accepted, then the security line — always on its own line */
body.page-code-file .pk-card-note .pk-note-sep { display: block; height: 0; }

/* google pay — its own button under the card cta while safepay is live (PK + all countries except india).
   posts the same checkout; safepay's hosted page is where the buyer actually taps G Pay (no preselect param) */
body.page-code-file .gpay-btn { display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 10px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 6px; background: #111111; color: #fff; cursor: pointer; touch-action: manipulation; transition: background .15s; }
body.page-code-file .gpay-btn:hover { background: #000000; }
body.page-code-file .gpay-btn:disabled { opacity: .7; cursor: not-allowed; }
body.page-code-file .gpay-btn.loading { color: #fff; font-size: 15px; font-weight: 600; }

/* small devices: layout + paint of the below-the-fold blocks wait until they scroll near the viewport.
   anchors (#reviews, #customize, #file-faq) still land — the browser renders a content-visibility:auto
   target before scrolling to it; the desktop rail re-parents two of these into the viewport, fine too */
body.page-code-file .related-files-section,
body.page-code-file .cf-also,
body.page-code-file .cf-custom-card,
body.page-code-file .rsrev,
body.page-code-file .rsffaq { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* payment popups: the confirmation notice is information, not a warning (owner 2026-09-19) */
body.page-code-file .method-verification-notice { background: var(--c-tint, #f6faff) !important; border: 1px solid var(--c-tint-line, #dbe7f3) !important; color: var(--c-text, #334155) !important; }
body.page-code-file .method-verification-notice i { color: var(--c-accent, #0074D9) !important; }

/* crypto popup: the selected wallet's QR card; the radio choice toggles hidden */
body.page-code-file .crypto-qr { margin: 10px 0 4px; }
body.page-code-file .crypto-qr[hidden] { display: none; }

/* PK card CTA = a plain black rectangle reading "Debit or Credit Card" (owner reference image, 2026-09-19).
   sits last so it outranks the pill / gradient / !important rules above by order at equal specificity */
body.page-code-file .method-pay-btn.pk-card-btn { background: #111111 !important; background-image: none !important; border-radius: 6px !important; box-shadow: none !important; min-height: 52px !important; padding: 0 18px !important; justify-content: center !important; }
body.page-code-file .method-pay-btn.pk-card-btn:hover { background: #000000 !important; transform: none !important; box-shadow: none !important; }
body.page-code-file .method-pay-btn.pk-card-btn .mpb-body { padding: 0 !important; }
body.page-code-file .method-pay-btn.pk-card-btn .mpb-main { font-family: var(--font-family-base) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #ffffff !important; }

/* proof form upload: a guided card around the standard file input, with a preview of the chosen screenshot (owner 2026-09-19) */
body.page-code-file .proof-upload { border: 1.5px dashed var(--c-tint-line, #cbd5e1); border-radius: 10px; padding: 14px; background: var(--c-tint-2, #f8fafc); transition: border-color .15s, background .15s; }
body.page-code-file .proof-upload.is-drag { border-color: var(--c-accent, #0074D9); background: var(--c-tint, #f0f7ff); }
body.page-code-file .proof-upload.has-file { border-style: solid; background: #fff; }
body.page-code-file .proof-upload-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
body.page-code-file .proof-upload-ic { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; border: 1px solid var(--c-tint-line, #e2e8f0); color: var(--c-accent, #0074D9); font-size: 16px; }
body.page-code-file .proof-upload-txt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-text, #1e293b); }
body.page-code-file .proof-upload-txt small { display: block; font-size: 12px; color: var(--c-text-muted, #64748b); margin-top: 2px; }
body.page-code-file .proof-upload.has-file .proof-upload-head { display: none; }
body.page-code-file .proof-upload .file-input { background: #fff !important; border-style: solid !important; }
body.page-code-file .proof-upload-preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
body.page-code-file .proof-upload-preview[hidden] { display: none; }
body.page-code-file .proof-upload-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-tint-line, #e2e8f0); background: #fff; }
body.page-code-file .proof-upload-meta { flex: 1; min-width: 0; }
body.page-code-file .proof-upload-name { display: block; font-size: 13px; font-weight: 600; color: var(--c-text, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-code-file .proof-upload-size { display: block; font-size: 12px; color: var(--c-text-muted, #64748b); }
body.page-code-file .proof-upload-clear { background: none; border: 1px solid var(--c-tint-line, #e2e8f0); border-radius: 8px; padding: 7px 10px; font: 600 12px var(--font-family-base); color: var(--c-text-muted, #64748b); cursor: pointer; }
body.page-code-file .proof-upload-clear:hover { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }