.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:1000;
}

.modal[aria-hidden="false"]{display:flex;}

.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.modal__dialog{
  position:relative;
  width:min(520px,100%);
  background:var(--yellow);
  border-radius:20px;
  padding:26px 22px;
  text-align:center;
  color:#111;
}

.modal__icon{font-size:48px;margin-bottom:10px;}
.modal__title{font-size:24px;font-weight:900;margin:0 0 8px;}
.modal__text{font-size:15px;margin:0 0 18px;color:#333;font-weight:600;}

.modal__btnRow{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.modal__btnRow .btn{
  min-width:160px;
  padding:14px 16px;
}

.btn--success{background:var(--blue);color:#fff;}
.btn--ghost{background:#fff;color:#000;border:1px solid #ddd;}

.confetti{position:fixed;inset:0;pointer-events:none;display:none;}