.cmsys-overlay[hidden], .cmsys-modal[hidden]{display:none!important;}
.cmsys-overlay{
  position:fixed; inset:0;
  background-color: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.cmsys-modal{
  position:fixed; inset:0; display:grid; place-items:center;
  z-index: 9999; padding:24px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.cmsys-window{
  width: min(100%, var(--cmsys-width, 640px));
  max-height: 90vh;
  overflow: auto;
  background: var(--cmsys-bg, #fff);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 24px;
  position: relative;
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.cmsys-overlay.is-open, .cmsys-modal.is-open { opacity:1; visibility:visible; }
.cmsys-modal.is-open .cmsys-window { transform: translateY(0) scale(1); opacity: 1; }

.cmsys-title {margin:0 0 8px;font-size: 24px;line-height:1.25;text-align: center;color: #2f2f2f;}
.cmsys-subtitle {margin:0 0 16px;color: #6e6e6e;text-align: center;font-size: 16px;}
.cmsys-content {font-size: 14px;line-height:1.55;}

.cmsys-close{
  position:absolute;
  top:8px;
  right:8px;
  width:36px;
  height:36px;
  border-radius:10px;
  background: #f3f3f300;
  border: 0;
  cursor:pointer;
  font-size: 25px;
  display:grid;
  place-items:center;
}
.cmsys-close:hover{ color: var(--brand); }

.cmsys-open-lock{ overflow:hidden; touch-action:none; }