.cbm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.cbm-overlay[hidden]{ display:none !important; }

.cbm-modal{
  width:min(92vw, 420px); background:#fff; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:20px 18px 18px; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.cbm-close{
  position:absolute; top:8px; right:10px; font-size:24px;
  line-height:1; background:transparent; border:0; cursor:pointer; color:#475569;
}
.cbm-hero{ margin-top:6px; margin-bottom:12px; }
.cbm-avatar{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:4px solid #e2e8f0;
}
.cbm-title{ margin:4px 0 6px; font-size:22px; font-weight:800; color:#0f172a; }
.cbm-sub{ margin:0 0 16px; color:#475569; font-size:15px; }
.cbm-actions{ display:flex; gap:10px; width:100%; justify-content:center; flex-wrap:wrap; }
.cbm-btn{
  appearance:none; border:2px solid transparent; cursor:pointer; border-radius:12px;
  font-weight:800; padding:10px 14px; font-size:15px;
}
.cbm-primary{ background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; }
.cbm-ghost{ background:#fff; border-color:#2563eb; color:#2563eb; }
.cbm-btn:focus{ outline:3px solid #93c5fd; outline-offset:2px; }

@media (max-width: 360px){
  .cbm-modal{ width:min(95vw, 420px); padding:16px 14px; }
  .cbm-avatar{ width:84px; height:84px; }
}

.cbm-overlay[hidden]{ display:none !important; }