.hookup-reputation {
  --hookup-level-color: #6fa0b4;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  color: var(--hookup-text, #0d252a);
  background: color-mix(in srgb, var(--hookup-level-color) 9%, var(--hookup-surface, #fff));
  border: 1px solid color-mix(in srgb, var(--hookup-level-color) 45%, transparent);
  border-radius: 18px;
}

.hookup-reputation__level,
.hookup-reputation__numbers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hookup-reputation__level span,
.hookup-reputation > small {
  color: var(--hookup-muted, #52686c);
}

.hookup-reputation__level strong {
  color: var(--hookup-level-color);
  font-size: 1.1rem;
}

.hookup-reputation__numbers {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.hookup-reputation__numbers span {
  padding: 7px 10px;
  background: color-mix(in srgb, var(--hookup-level-color) 12%, transparent);
  border-radius: 999px;
}

.hookup-reputation__progress {
  height: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--hookup-level-color) 18%, transparent);
  border-radius: 999px;
}

.hookup-reputation__progress span {
  display: block;
  height: 100%;
  background: var(--hookup-level-color);
  border-radius: inherit;
}

.hookup-reputation--ring::after,
.hookup-reputation--wave::after,
.hookup-reputation--ambassador::after {
  position: absolute;
  right: -30px;
  bottom: -45px;
  width: 120px;
  height: 120px;
  content: "";
  border: 10px solid color-mix(in srgb, var(--hookup-level-color) 22%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.hookup-reputation--frame {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--hookup-level-color) 22%, transparent);
}

.hookup-reputation--wave::after {
  width: 150px;
  height: 70px;
  border-width: 8px 0 0;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.hookup-reputation--ambassador {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hookup-level-color) 18%, var(--hookup-surface, #fff)), var(--hookup-surface, #fff));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--hookup-level-color) 18%, transparent);
}

html[data-theme="dark"] .hookup-reputation {
  color: var(--hookup-text, #f4f8f9);
  background: color-mix(in srgb, var(--hookup-level-color) 13%, var(--hookup-surface, #12272c));
}

html[data-theme="dark"] .hookup-reputation__level span,
html[data-theme="dark"] .hookup-reputation > small {
  color: var(--hookup-muted, #b7c8cc);
}

@media (max-width: 540px) {
  .hookup-reputation { padding: 15px; }
  .hookup-reputation__level { align-items: flex-start; flex-direction: column; gap: 2px; }
}