:root{
  --badge-size: min(520px, 92vw);
  --bg:#f3f4f6;
  --fg:#111827;
  --muted:rgba(17,24,39,.7);
  --badge-bg:#ffffff66;
  --badge-brd:rgba(0,0,0,.18);
  --star:#d7a845;
              --page-bg: #f3f4f6;
            --page-fg: #111827;
            --img: url('approved.png');
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --fg:#e5e7eb;
    --muted:rgba(229,231,235,.5);
    --badge-bg:#0f172a66;
    --badge-brd:rgba(255,255,255,.18);
    --star:#d7a845;
                    --page-bg: #0b1220;
                --page-fg: #e5e7eb;
  }
}

html,body{
  height:100%;
  width: 100%;
  margin:0;
  display:grid;
  place-items:center;
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fg);
                background: radial-gradient(1200px 600px at 50% 20%, rgba(255, 255, 255, 0.25), transparent 60%),
                radial-gradient(900px 500px at 20% 80%, rgba(255, 255, 255, 0.15), transparent 60%),
                var(--page-bg);
}


.badge-wrap{
  width:var(--badge-size);
  aspect-ratio:1/1;
  position:relative;
    background-image: var(--img);
  background-size: 76%;
  background-repeat: no-repeat;
  background-position: 47% 72%;
}

/* ===== SVG BACKGROUND ===== */
.badge-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== CONTENT ===== */
.badge-content{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  pointer-events:none;
  height: 25%;
  top: 50%;

}

.title{
  font-weight:900;
  letter-spacing:0.12em;
  font-size:clamp(26px, 6vw, 44px);
  line-height:1;
}

/* ===== STARS ===== */
.stars{
  position:relative;
  font-size:clamp(26px, 5vw, 44px);
  letter-spacing:10px;
  line-height:1;
  color:var(--star);
  -webkit-text-stroke:1px rgba(0,0,0,.18);
}

.stars::after{
  content:"★★★★★";
  position:absolute;
  inset:0;
  color:transparent;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.9) 50%,
      transparent 65%,
      transparent 100%);
  background-size:180px 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  animation:shimmer 3.2s ease-in-out infinite;
  opacity:0;
}

.star{
  display:inline-block;
  transform-origin:50% 50%;
  animation:starPulse 3.2s ease-in-out infinite;
}

.s1{animation-delay:.20s}
.s2{animation-delay:.35s}
.s3{animation-delay:.50s}
.s4{animation-delay:.65s}
.s5{animation-delay:.80s}

@keyframes shimmer{
  0%{background-position:-200px 0;opacity:0}
  20%{opacity:0}
  35%{opacity:1}
  55%{opacity:1}
  70%{opacity:0}
  100%{background-position:420px 0;opacity:0}
}

@keyframes starPulse{
  0%{transform:scale(1)}
  30%{transform:scale(1.2)}
  45%{transform:scale(1.2)}
  60%{transform:scale(1)}
  100%{transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .stars::after,.star{animation:none}
}