body, html {
  background-color: #f4f7f9;
}
/* ==== Global Showcase Styles ==== */
.pb-showcase-container {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}
.pb-section-title {
  font-size: 1.6em;
  color: #2c3e50;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
}
.pb-section {
  display: flex;
  flex-direction: column; /* Stack progress bars */
  gap: 20px; /* Space between progress bars */
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 50, 100, 0.06);
}

/* ==== Base Progress Bar Styles ==== */
.pb-container {
  background-color: #e9ecef; /* Track color */
  border-radius: .25rem; /* Default Bootstrap-like radius */
  overflow: hidden; /* Important for border-radius on fill */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
  height: 20px; /* Default height */
  position: relative; /* For labels if any */
}

.pb-fill {
  height: 100%;
  background-color: #007bff; /* Default blue, will be overridden by color classes */
  transition: width .6s ease;
  display: flex; /* For label alignment */
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ==== Style Variation 1: Basic Flat (pb-flat) ==== */
/* This is the default, .pb-flat class is mostly for semantic clarity if needed */
.pb-flat .pb-fill {
  /* No additional styling needed beyond base for flat */
}

/* ==== Style Variation 2: Striped (pb-striped) ==== */
.pb-striped .pb-fill {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem; /* Adjust stripe size */
}

/* ==== Style Variation 3: Animated Stripes (pb-animated) ==== */
.pb-striped.pb-animated .pb-fill {
  animation: pb-stripes-animate 1s linear infinite;
}
@keyframes pb-stripes-animate {
  0% { background-position-x: 1rem; }
}

/* ==== Style Variation 4: Rounded (pb-rounded) ==== */
.pb-rounded {
  border-radius: 50px; /* Fully rounded container */
  height: 22px; /* Slightly taller for rounded aesthetic */
}
.pb-rounded .pb-fill {
  border-radius: 50px; /* Fully rounded fill */
}
.pb-rounded .pb-label {
  padding: 0 10px;
}

/* ==== Style Variation 5: Slim (pb-slim) ==== */
.pb-slim {
  height: 8px;
  border-radius: 4px;
  box-shadow: none; /* Often no shadow for slim bars */
}
.pb-slim .pb-fill {
  /* No text label typical for slim bars */
}

/* ==== Color Variations for .pb-fill ==== */
/* Blue (Default, but explicit class for clarity) */
.pb-blue .pb-fill { background-color: #2196F3; }

/* Green */
.pb-green .pb-fill { background-color: #4CAF50; }

/* Red */
.pb-red .pb-fill { background-color: #f44336; }

/* Orange */
.pb-orange .pb-fill { background-color: #ff9800; }

/* Grey */
.pb-grey .pb-fill { background-color: #78909c; }