/* ── Overlay ── */
#cpp-overlay{
    position:fixed;inset:0;background:var(--cpp-overlay);
    z-index:999999;display:flex;align-items:center;justify-content:center;
    padding:16px;box-sizing:border-box;
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease
}
#cpp-overlay.cpp-visible{opacity:1;visibility:visible}

/* ── Modal ── */
#cpp-modal{
    position:relative;background:var(--cpp-popup-bg);
    max-width:var(--cpp-popup-width);width:100%;
    max-height:90vh;overflow-y:auto;
    border-radius:var(--cpp-popup-radius);
    padding:40px 44px 36px;
    box-shadow:0 24px 80px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.1);
    box-sizing:border-box;scrollbar-width:thin
}
#cpp-modal::-webkit-scrollbar{width:5px}
#cpp-modal::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px}

/* ── Animations ── */
.cpp-anim-fade{opacity:0;transition:opacity .35s ease}
#cpp-overlay.cpp-visible .cpp-anim-fade{opacity:1}

.cpp-anim-slide{opacity:0;transform:translateY(40px);transition:opacity .35s ease,transform .4s cubic-bezier(.22,.68,0,1.2)}
#cpp-overlay.cpp-visible .cpp-anim-slide{opacity:1;transform:translateY(0)}

.cpp-anim-zoom{opacity:0;transform:scale(.82);transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
#cpp-overlay.cpp-visible .cpp-anim-zoom{opacity:1;transform:scale(1)}

.cpp-anim-none{transition:none}

/* ── Close ── */
#cpp-close{
    position:absolute;top:14px;right:16px;
    background:none;border:none;font-size:26px;line-height:1;
    color:var(--cpp-close-color);cursor:pointer;
    padding:4px 8px;border-radius:6px;transition:background .15s,transform .15s
}
#cpp-close:hover{background:rgba(0,0,0,.07);transform:scale(1.1)}

/* ── Heading ── */
#cpp-heading{
    font-size:var(--cpp-heading-size);font-weight:var(--cpp-heading-weight);
    color:#1a1a1a;margin:0 0 20px;padding:0;text-align:center;line-height:1.25
}
.cpp-heading-accent{color:var(--cpp-heading-color)}

/* ── Body ── */
#cpp-body{font-size:var(--cpp-body-size);color:var(--cpp-body-color);line-height:1.65}
#cpp-body p{margin:0 0 14px}
#cpp-body p:last-child{margin-bottom:0}

/* ── Lists ── */
#cpp-body ul{list-style:none;margin:0;padding:0}
#cpp-body ul li{position:relative;padding:14px 0 14px 32px;border-top:1px solid #f0f0f0;line-height:1.55}
#cpp-body ul li:first-child{border-top:none}

.cpp-list-icon-checkmark #cpp-body ul li::before{content:'✓';position:absolute;left:0;top:14px;color:var(--cpp-accent);font-weight:700;font-size:15px}
.cpp-list-icon-dot       #cpp-body ul li::before{content:'•';position:absolute;left:6px;top:14px;color:var(--cpp-accent);font-size:18px;line-height:1}
.cpp-list-icon-arrow     #cpp-body ul li::before{content:'→';position:absolute;left:0;top:14px;color:var(--cpp-accent);font-weight:600}
.cpp-list-icon-none      #cpp-body ul li{padding-left:0}

#cpp-body ol{padding-left:22px;margin:0}
#cpp-body ol li{padding:5px 0}

/* ── Source ── */
#cpp-source{margin-top:20px;padding-top:16px;border-top:1px solid #eee;font-size:12px;color:#888;line-height:1.6}

/* ── Responsive ── */
@media(max-width:600px){
    #cpp-modal{padding:28px 18px 24px;border-radius:10px}
}