<div class="sig-stage">
  <div class="sig-badge">
    <div class="sig-bars-group">
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
      <div class="sig-bar sig-active"></div>
    </div>
    <div class="sig-info">
      <div class="sig-strength">Excellent</div>
      <div class="sig-label">Confidence · 4 / 4</div>
    </div>
  </div>

  <div class="sig-mini-set">
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Good · 3/4</div>
    </div>
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Fair · 2/4</div>
    </div>
    <div class="sig-row-mini">
      <div class="sig-bars-mini">
        <div class="sig-bar sig-active"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
        <div class="sig-bar sig-inactive"></div>
      </div>
      <div class="sig-name-mini">Weak · 1/4</div>
    </div>
  </div>
</div>

.sig-stage {
  background: #f5f4f2;
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
  min-height: 360px;
}
.sig-badge {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  padding: 16px 20px 14px;
  background: white;
  border: 1px solid #e0ddd8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  position: relative;
}
.sig-badge:hover .sig-bar { background: #1a1612 !important; }
.sig-bars-group {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-right: 14px;
}
.sig-bar {
  width: 8px;
  border-radius: 1px;
  transition: background 0.2s, height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sig-bars-group .sig-bar:nth-child(1) { height: 10px; }
.sig-bars-group .sig-bar:nth-child(2) { height: 18px; }
.sig-bars-group .sig-bar:nth-child(3) { height: 26px; }
.sig-bars-group .sig-bar:nth-child(4) { height: 34px; }
.sig-active   { background: #1a1612; }
.sig-inactive { background: #dddbd6; }
.sig-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.sig-strength {
  font-family: Georgia, "Fraunces", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1a1612;
}
.sig-label {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4a4239;
}
.sig-mini-set {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px;
}
.sig-row-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sig-bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.sig-bars-mini .sig-bar { width: 5px; }
.sig-bars-mini .sig-bar:nth-child(1) { height: 6px; }
.sig-bars-mini .sig-bar:nth-child(2) { height: 10px; }
.sig-bars-mini .sig-bar:nth-child(3) { height: 14px; }
.sig-bars-mini .sig-bar:nth-child(4) { height: 18px; }
.sig-name-mini {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #4a4239;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .sig-bar { transition: none; }
}