.cxV2-backdrop{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:rgba(0,0,0,.6); backdrop-filter: blur(6px);
  animation: cxV2-fade .18s ease-out;
}
@keyframes cxV2-fade{from{opacity:0}to{opacity:1}}

.cxV2-modal{
    font-family: 'Inter', sans-serif;
  width:min(680px,94vw);
  color:#fff;
  background: linear-gradient(
    180deg,
    rgb(8,7,10) 0%,
    color-mix(in srgb, var(--cx-accent) 20%, black) 100%
  );
  border-radius:18px;
  padding:16px 16px 14px;
  border:1.5px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 60px rgba(0,0,0,.6), 0 0 32px var(--cx-shadow, rgba(238,100,74,.35));
  transform: translateY(6px) scale(.98);
  animation: cxV2-pop .18s ease-out forwards;
  position:relative;
  --accent: var(--cx-accent, #EE644A);
  outline: 1px solid transparent;
}
@keyframes cxV2-pop{to{transform:translateY(0) scale(1)}}


.cxV2-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; padding:0;
  background:transparent; border:none; color:#fff;
  font-size:20px; line-height:40px; text-align:center; cursor:pointer;
  opacity:.7; transition:opacity .15s, transform .15s;
}
.cxV2-close:hover{ opacity:1; transform: scale(1.06) }

.cxV2-head{
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  height: 100px;             
  gap: 8px;
  padding-top: 6px;
  overflow: hidden;  
}
.cxV2-logo{
  height:238px; object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.cxV2-head h3{
  margin:0; font-size:1.15rem; letter-spacing:.3px; opacity:.95;
}

.cxV2-body{
  margin-top:12px;
  background:rgb(2 2 2 / 60%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 14px 12px;
  line-height:1.6; font-size:.98rem;
  max-height: clamp(220px, 42vh, 360px);
  overflow:auto;
}
.cxV2-body p{ margin:8px 0 }
.cxV2-note{
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:.95rem;
}

.cxV2-body::-webkit-scrollbar{ width:8px }
.cxV2-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18); border-radius:8px;
}
.cxV2-body::-webkit-scrollbar-track{ background: transparent }

.cxV2-actions{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 6px 4px;
}
.cxV2-primary{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 240px;
  padding:12px 18px; border-radius:14px; font-weight:700; letter-spacing:.2px;
  color:#ffffff; text-decoration:none; cursor:pointer;
  background: var(--cx-accent, #EE644A);
  box-shadow: 0 0 22px var(--cx-shadow, rgba(238,100,74,.35)), inset 0 0 1px rgba(255,255,255,.6);
  transition: transform .12s ease, filter .12s ease;
}
.cxV2-primary:hover{ transform: translateY(-1px); filter:brightness(1.06) }

.cxV2-ghost{
  appearance:none; border:0; background:transparent; color:#fff; opacity:.7;
  padding:6px 10px; cursor:pointer;
}
.cxV2-ghost:hover{ opacity:1 }

@media (max-width:520px){
  .cxV2-modal{ width:96vw; border-radius:16px; padding:12px 12px 10px }
  .cxV2-logo{ max-height:250px }
  .cxV2-head h3{ font-size:1rem }
  .cxV2-primary{ min-width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .cxV2-backdrop, .cxV2-modal{ animation:none }
  .cxV2-close{ transition:none }
  .cxV2-primary{ transition:none }
}
.cxV2-modal .highlight {
  color: var(--cx-accent);
  text-shadow: 0 0 2px var(--cx-accent);
  font-weight: 600;
}