/* ============================================================
   KICK FORGE STUDIO — TRY-MODE DEMO OVERLAY
   Load AFTER kickdesignstudio.css on /try-studio/ page
   v2 — Theme isolation, pack-level locks
   ============================================================ */

/* All KFD elements get their own var scope */
.kfd-banner,
.kfd-modal-overlay,
.kfd-modal,
.kfd-nudge,
.kfd-pack-lock,
.kfd-pack-unlock-hint {
    --kfd-cyan:   #00e5ff;
    --kfd-white:  #ffffff;
    --kfd-t1:     #f5f5f7;
    --kfd-t2:     #c4c4c8;
    --kfd-t3:     #8a8a90;
    --kfd-bg-1:   #14141a;
    --kfd-bg-2:   #0c0c10;
    --kfd-gold:   #ffd600;
}

/* Hide admin / non-demo elements */
#kf.kf-demo-mode #nav-reports,
#kf.kf-demo-mode .pb-admin-btn,
#kf.kf-demo-mode #lib-admin-upload-punch,
#kf.kf-demo-mode #lib-admin-upload-tail,
#kf.kf-demo-mode #lib-admin-upload-tailb,
#kf.kf-demo-mode #lib-admin-upload-tok,
#kf.kf-demo-mode #lib-admin-upload-kickenhancer,
#kf.kf-demo-mode #pb-admin-add-pack {
    display: none !important;
}

/* ── Demo Banner — small compact pill, fixed top-left ── */
.kfd-banner {
    position: fixed !important;
    top: 84px !important;
    left: 16px !important;
    width: auto !important;
    max-width: 200px !important;
    z-index: 9990 !important;
    background: linear-gradient(180deg, rgba(0,229,255,0.10) 0%, rgba(0,0,0,0.88) 100%) !important;
    border: 1px solid rgba(0,229,255,0.4) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    color: var(--kfd-t1) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 16px rgba(0,229,255,0.12) !important;
}
.kfd-banner * { box-sizing: border-box !important; }
.kfd-banner-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.kfd-banner-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    background: var(--kfd-cyan) !important;
    border-radius: 6px !important;
    display: grid !important;
    place-items: center !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(0,229,255,0.4) !important;
}
.kfd-banner-icon svg { width: 12px; height: 12px; display: block; }
.kfd-banner-label {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--kfd-cyan) !important;
    line-height: 1.2 !important;
}
.kfd-banner-text {
    line-height: 1.4 !important;
    color: var(--kfd-t2) !important;
    font-size: 10px !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
}
.kfd-banner-text b { color: var(--kfd-cyan) !important; font-weight: 700 !important; }
.kfd-banner-cta {
    background: var(--kfd-cyan) !important;
    color: #000 !important;
    border: none !important;
    padding: 7px 12px !important;
    border-radius: 5px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    width: 100% !important;
}
.kfd-banner-cta:hover {
    background: var(--kfd-white) !important;
    box-shadow: 0 4px 14px rgba(0,229,255,0.5) !important;
    transform: translateY(-1px) !important;
    color: #000 !important;
}

/* Hide on smaller screens where it would interfere with studio content */
@media (max-width: 1024px) {
    .kfd-banner {
        display: none !important;
    }
}

/* ── Locked buttons (layer tabs, bbar) ── */
.kfd-locked {
    position: relative !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}
.kfd-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 8px);
    border-radius: inherit;
    z-index: 1;
}
.kfd-lock-badge {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: #00e5ff;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.6));
}
.kfd-lock-badge svg { width: 100%; height: 100%; display: block; }
.layer-tab.kfd-locked { position: relative; }
.layer-tab.kfd-locked .kfd-lock-badge { right: 6px; top: 50%; }
.bb.kfd-locked .kfd-lock-badge {
    position: relative; right: auto; top: auto; transform: none;
    margin-left: 2px; display: inline-block;
}

/* ============================================================
   SIDEBAR — Packs visible, each pack gets its own lock
   ============================================================ */

/* Hide the big "Save" button in sidebar header in demo mode */
#kf.kf-demo-mode .preset-sidebar .pb-save-btn { display: none !important; }
#kf.kf-demo-mode #sidebarLockBtn { display: none !important; }

/* Tabs and filters dimmed but visible (so users see "Community", "My Presets" exist) */
#kf.kf-demo-mode .preset-sidebar .pb-tabs,
#kf.kf-demo-mode .preset-sidebar .pb-filters,
#kf.kf-demo-mode .preset-sidebar .back-to-packs-btn {
    pointer-events: none !important;
    opacity: 0.45 !important;
    filter: none !important;
}

/* Make pack containers themselves visible & clickable */
#kf.kf-demo-mode .preset-sidebar #packs-category-container,
#kf.kf-demo-mode .preset-sidebar #community-category-container,
#kf.kf-demo-mode .preset-sidebar #packs-view-container,
#kf.kf-demo-mode .preset-sidebar #presets-view-container {
    pointer-events: auto !important;
    user-select: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Each pack card: clickable, with overlay */
#kf.kf-demo-mode .pack-card,
#kf.kf-demo-mode .packs-category-card,
#kf.kf-demo-mode .preset-row,
#kf.kf-demo-mode .preset-item {
    position: relative !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Subtle dim overlay so the lock pops */
#kf.kf-demo-mode .pack-card::before,
#kf.kf-demo-mode .packs-category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.30);
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    transition: background 0.2s;
}
#kf.kf-demo-mode .pack-card:hover::before,
#kf.kf-demo-mode .packs-category-card:hover::before {
    background: rgba(0,0,0,0.55);
}

/* The lock badge — placed in top-right of each pack */
.kfd-pack-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #00e5ff, #0099b3);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 14px rgba(0,229,255,0.5);
    pointer-events: none;
    transition: all 0.2s ease;
}
.kfd-pack-lock svg { width: 16px; height: 16px; display: block; }
#kf.kf-demo-mode .pack-card:hover .kfd-pack-lock,
#kf.kf-demo-mode .packs-category-card:hover .kfd-pack-lock {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 22px rgba(0,229,255,0.8);
}

/* "UNLOCK" hint that fades in on hover */
.kfd-pack-unlock-hint {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0,229,255,0.95);
    color: #000;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
#kf.kf-demo-mode .pack-card:hover .kfd-pack-unlock-hint,
#kf.kf-demo-mode .packs-category-card:hover .kfd-pack-unlock-hint {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   UPGRADE MODAL
   ============================================================ */
.kfd-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.78) !important;
    backdrop-filter: blur(8px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    padding: 20px !important;
    opacity: 0;
    transition: opacity 0.25s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.kfd-modal-overlay.active { display: flex !important; opacity: 1; }
.kfd-modal-overlay *,
.kfd-modal-overlay *::before,
.kfd-modal-overlay *::after {
    box-sizing: border-box !important;
}
.kfd-modal {
    background: linear-gradient(180deg, #14141a 0%, #0c0c10 100%) !important;
    border: 1px solid rgba(0,229,255,0.3) !important;
    border-radius: 18px !important;
    max-width: 880px !important;
    width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(0,229,255,0.15), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform: scale(0.96) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.2,0.9,0.3,1.2);
    position: relative !important;
    color: var(--kfd-t1) !important;
}
.kfd-modal-overlay.active .kfd-modal { transform: scale(1) translateY(0); }
.kfd-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    color: var(--kfd-t2) !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.2s !important;
    z-index: 2 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.kfd-modal-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--kfd-t1) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
.kfd-modal-close svg { width: 14px; height: 14px; display: block; }

.kfd-modal-header {
    padding: 34px 34px 18px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.kfd-modal-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--kfd-cyan) !important;
    margin-bottom: 12px !important;
    padding: 4px 12px !important;
    background: rgba(0,229,255,0.08) !important;
    border: 1px solid rgba(0,229,255,0.25) !important;
    border-radius: 999px !important;
}
.kfd-modal-eyebrow svg { width: 11px; height: 11px; }
.kfd-modal-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--kfd-t1) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
.kfd-modal-title span { color: var(--kfd-cyan) !important; }
.kfd-modal-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: var(--kfd-t3) !important;
    line-height: 1.6 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.kfd-billing-toggle {
    display: inline-flex !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    margin: 18px auto 0 !important;
}
.kfd-billing-btn {
    padding: 8px 18px !important;
    background: transparent !important;
    border: none !important;
    color: var(--kfd-t3) !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.kfd-billing-btn.active { background: var(--kfd-cyan) !important; color: #000 !important; }
.kfd-billing-badge {
    background: var(--kfd-gold) !important;
    color: #000 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

.kfd-tiers {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 24px 34px 28px !important;
}
.kfd-tier {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: all 0.2s !important;
    color: var(--kfd-t1) !important;
}
.kfd-tier:hover { border-color: rgba(255,255,255,0.15) !important; transform: translateY(-2px); }
.kfd-tier.featured {
    border-color: rgba(0,229,255,0.4) !important;
    background: linear-gradient(180deg, rgba(0,229,255,0.04) 0%, rgba(0,229,255,0.01) 100%) !important;
    box-shadow: 0 0 0 1px rgba(0,229,255,0.2), 0 12px 30px rgba(0,229,255,0.08) !important;
}
.kfd-tier-badge {
    position: absolute !important;
    top: -10px !important;
    right: 16px !important;
    background: var(--kfd-cyan) !important;
    color: #000 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(0,229,255,0.3) !important;
    text-shadow: none !important;
}
.kfd-tier-name {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--kfd-t1) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
.kfd-tier-tagline {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: var(--kfd-t3) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
.kfd-tier-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 0 4px 0 !important;
}
.kfd-tier-price-amount {
    font-family: 'Inter', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--kfd-t1) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}
.kfd-tier-price-period {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 11px !important;
    color: var(--kfd-t3) !important;
    letter-spacing: 0.05em !important;
}
.kfd-tier-price-strike {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: var(--kfd-t3) !important;
    margin-bottom: 14px !important;
    min-height: 16px !important;
    line-height: 1.4 !important;
}
.kfd-tier-price-strike s { color: var(--kfd-t3) !important; text-decoration: line-through !important; }
.kfd-tier-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 14px 0 18px 0 !important;
    flex: 1 !important;
}
.kfd-tier-features li {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: var(--kfd-t2) !important;
    line-height: 1.5 !important;
    padding: 5px 0 5px 22px !important;
    position: relative !important;
    margin: 0 !important;
    list-style: none !important;
}
.kfd-tier-features li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 9px !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--kfd-cyan) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.kfd-tier-cta {
    background: var(--kfd-cyan) !important;
    color: #000 !important;
    border: none !important;
    padding: 13px 18px !important;
    border-radius: 10px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.kfd-tier-cta:hover {
    background: var(--kfd-white) !important;
    box-shadow: 0 6px 24px rgba(0,229,255,0.4) !important;
    transform: translateY(-1px);
    color: #000 !important;
}
.kfd-tier.standard .kfd-tier-cta {
    background: rgba(255,255,255,0.06) !important;
    color: var(--kfd-t1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.kfd-tier.standard .kfd-tier-cta:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(0,229,255,0.4) !important;
    color: var(--kfd-cyan) !important;
}

.kfd-modal-footer {
    padding: 0 34px 26px !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: var(--kfd-t3) !important;
}
.kfd-modal-footer a {
    color: var(--kfd-cyan) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.kfd-modal-footer a:hover { text-decoration: underline !important; }

@media (max-width: 720px) {
    .kfd-tiers { grid-template-columns: 1fr !important; padding: 20px !important; }
    .kfd-modal-header { padding: 28px 20px 16px !important; }
    .kfd-modal-title { font-size: 22px !important; }
    .kfd-modal-subtitle { font-size: 12px !important; }
}

/* ── Soft Nudge ── */
.kfd-nudge {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    background: linear-gradient(180deg, #14141a 0%, #0c0c10 100%) !important;
    border: 1px solid rgba(0,229,255,0.3) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    max-width: 320px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 30px rgba(0,229,255,0.12) !important;
    z-index: 999998 !important;
    transform: translateX(120%);
    transition: transform 0.5s cubic-bezier(0.2,0.9,0.3,1.2);
    font-family: 'Inter', sans-serif !important;
    color: var(--kfd-t1) !important;
}
.kfd-nudge.show { transform: translateX(0); }
.kfd-nudge * { box-sizing: border-box !important; }
.kfd-nudge-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    background: transparent !important;
    border: none !important;
    color: var(--kfd-t3) !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    padding: 0 !important;
}
.kfd-nudge-close:hover { color: var(--kfd-t1) !important; background: rgba(255,255,255,0.05) !important; }
.kfd-nudge-close svg { width: 12px; height: 12px; }
.kfd-nudge-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--kfd-t1) !important;
    margin: 0 0 4px 0 !important;
    padding-right: 24px !important;
}
.kfd-nudge-title span { color: var(--kfd-cyan) !important; }
.kfd-nudge-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: var(--kfd-t3) !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}
.kfd-nudge-cta {
    background: var(--kfd-cyan) !important;
    color: #000 !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 7px !important;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    line-height: 1 !important;
}
.kfd-nudge-cta:hover {
    background: var(--kfd-white) !important;
    box-shadow: 0 4px 16px rgba(0,229,255,0.4) !important;
    color: #000 !important;
}

@media (max-width: 600px) {
    .kfd-nudge {
        bottom: 80px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
    }
}

/* ============================================================
   v3 — EQ TARGET TABS LOCKED
   ============================================================ */
/* Style for locked EQ target tabs (all except Master) */
#kf.kf-demo-mode .eq-target-tab.kfd-locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    position: relative !important;
    padding-right: 22px !important;
}
#kf.kf-demo-mode .eq-target-tab.kfd-locked .kfd-tab-lock {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    color: #00e5ff;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,229,255,0.5));
}
#kf.kf-demo-mode .eq-target-tab.kfd-locked .kfd-tab-lock svg {
    width: 100%; height: 100%; display: block;
}

/* ============================================================
   v3 — EQ PRESET TABS LOCKED (Core EQ / My EQ)
   Inline lock badges on tab buttons. Cleaner than overlay.
   ============================================================ */
#kf.kf-demo-mode .eq-preset-section > .pb-tabs .pb-tab {
    position: relative !important;
    padding-right: 24px !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}
#kf.kf-demo-mode .eq-preset-section > .pb-tabs .pb-tab::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    background: #00e5ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 3px rgba(0,229,255,0.5));
    pointer-events: none;
}
/* Content area below: blur + center a single lock icon, no box/text */
#kf.kf-demo-mode .eq-preset-section > .pb-content {
    position: relative !important;
    pointer-events: none !important;
    filter: blur(3px) saturate(0.6) !important;
    opacity: 0.45 !important;
    min-height: 80px !important;
}
#kf.kf-demo-mode .eq-preset-section {
    position: relative !important;
}
/* Pure lock icon centered over the content — no border, no text, no background */
#kf.kf-demo-mode .eq-preset-section::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: #00e5ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 12px rgba(0,229,255,0.7)) drop-shadow(0 0 4px rgba(0,229,255,0.9));
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   v5 — TOPBAR PRESET SELECTOR LOCKED
   The ← → arrows and NONE dropdown in the studio top bar
   ============================================================ */
#kf.kf-demo-mode .topbar-nav-btn,
#kf.kf-demo-mode #topbarDropdownContainer,
#kf.kf-demo-mode #topbarDropdownSelected {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* Re-enable pointer-events on the container so the lock badge can intercept clicks */
#kf.kf-demo-mode .kfd-topbar-preset-wrap {
    position: relative !important;
    cursor: pointer !important;
}
.kfd-topbar-preset-lock {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    color: #00e5ff;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.6));
    z-index: 10;
}
.kfd-topbar-preset-lock svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   v3 — HIDE FAVORITES (HEARTS) — both preset & sample library
   ============================================================ */
#kf.kf-demo-mode .pb-fav,
#kf.kf-demo-mode .lib-item-fav {
    display: none !important;
}

/* ============================================================
   v3 — LIBRARY LAYER TABS LOCKED (Punch/Tail A/Tok/Kick Enhancer)
   This is the THIRD place where Tok/Kick Enhancer appear:
   inside the sample library panel above each layer's sample list.
   ============================================================ */
#kf.kf-demo-mode .lib-layer-tab.kfd-locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    position: relative !important;
    padding-right: 24px !important;
}
#kf.kf-demo-mode .lib-layer-tab.kfd-locked::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    background: #00e5ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 3px rgba(0,229,255,0.5));
    pointer-events: none;
}

/* ============================================================
   v3 — UPLOAD WAV BUTTONS LOCKED
   ============================================================ */
#kf.kf-demo-mode .lib-upload-btn {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    position: relative !important;
    padding-right: 26px !important;
}
#kf.kf-demo-mode .lib-upload-btn::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #00e5ff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 0 3px rgba(0,229,255,0.5));
    pointer-events: none;
}

/* "+ UPLOAD CUSTOM .WAV" rows in sample dropdowns */
#kf.kf-demo-mode .sample-list-item.kfd-upload-locked {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    position: relative !important;
}
#kf.kf-demo-mode .sample-list-item.kfd-upload-locked::after {
    content: '🔒';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    filter: drop-shadow(0 0 3px rgba(0,229,255,0.5));
}

/* ============================================================
   v3 — FAKE DEMO PACK CONTAINER (the static 3 packs)
   ============================================================ */
.kfd-fake-packs-wrap {
    padding: 12px;
}
.kfd-fake-packs-intro {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #c4c4c8;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(0,229,255,0.05);
    border-left: 2px solid #00e5ff;
    border-radius: 4px;
}
.kfd-fake-packs-intro b { color: #00e5ff; }
.kfd-fake-packs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.kfd-fake-pack {
    background: #1a1a24;
    border: 1px solid #2a2a35;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.kfd-fake-pack:hover {
    border-color: rgba(0,229,255,0.5);
    transform: translateY(-2px);
}
.kfd-fake-pack:hover::before {
    background: rgba(0,0,0,0.5);
}
.kfd-fake-pack::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.30);
    pointer-events: none;
    z-index: 5;
    transition: background 0.2s;
}
.kfd-fake-pack-cover {
    width: 100%;
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0d1117;
    border-bottom: 1px solid #2a2a35;
    pointer-events: none;
    position: relative;
}
.kfd-fake-pack-info {
    padding: 10px;
    pointer-events: none;
    position: relative;
    z-index: 6;
}
.kfd-fake-pack-title {
    color: #ffffff;
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.kfd-fake-pack-subtitle {
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}