/* Certificate container (mobile-first, square, stable before SVG loads) */
.sct-certificate {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;

  aspect-ratio: 1 / 1;
  position: relative;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 214, 240, 0.22);
  border-radius: 2px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  box-shadow: 0 0 2px rgba(255, 190, 220, 0.18);
}

/* Make injected SVG fill the square cleanly */
.sct-certificate svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Generate button spacing (your global button classes handle most styling) */
#generate-btn {
  margin: 1rem auto 0.75rem;
  display: inline-flex;
}


button,
.sct-button,
summary,
label,
input {
  -webkit-tap-highlight-color: transparent;
}