/* Layout */
.uc-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding-block: 72px;
}
.uc-card {
  width: min(780px, 96%);
  background: #0c0f14cc;
  border: var(--ring);
  border-radius: var(--radius-2xl);
  padding: 1.6rem;
  backdrop-filter: blur(var(--card-blur)) saturate(140%);
  box-shadow: var(--shadow-neon);
  text-align: center;
  isolation: isolate;
}

/* Icon / gears */
.uc-icon {
  position: relative;
  height: 110px;
  display: grid;
  place-items: center;
  margin-bottom: .6rem;
  color: var(--teal);
  filter: drop-shadow(0 0 20px #00ffcc33);
}
.gear { opacity: .9; }
.gear-a { animation: spin 12s linear infinite; }
.gear-b { position: absolute; top: 14px; right: 26%; color: var(--pink); animation: spinReverse 16s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }

/* Title / text */
.uc-title { 
  margin: .4rem 0 .2rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
}
.uc-lead { max-width: 70ch; margin-inline: auto; }

/* Construction tape */
.tape {
  --stripe: repeating-linear-gradient(
    -45deg,
    #111 0 12px,
    #111 12px 24px,
    #ffc400 24px 36px,
    #ffc400 36px 48px
  );
  margin: 1.1rem auto 1.2rem;
  height: 64px;
  width: min(680px, 92%);
  border-radius: 12px;
  border: 1px solid #ffffff1e;
  background: var(--stripe);
  box-shadow: inset 0 0 0 1px #00000066, 0 12px 28px #00000080, 0 0 30px #ffc40022;
  background-size: 200% 200%;
  animation: slideTape 2.8s linear infinite;
}
@keyframes slideTape { to { background-position: 200% 0; } }

/* Progress */
.uc-progress { margin: .8rem 0 1.1rem; }
.uc-progress .bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #ffffff1a;
  background: #0b0e13;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff10;
}
.uc-progress .fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  box-shadow: 0 0 18px #00ffcc55;
  transform-origin: left center;
  animation: pulseGlow 2.2s ease-in-out infinite alternate;
}
@keyframes pulseGlow { from { filter: brightness(1); } to { filter: brightness(1.25); } }

/* Actions */
.uc-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: .6rem;
}