.timer-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timer-bg {
  fill: none;
  stroke: rgba(255,255,255,0.2); /* Lighter on green bg */
  stroke-width: 4;
}

.timer-fg {
  fill: none;
  stroke: #ffffff; /* White stroke on green bg */
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.timer-text {
  font-size: 10px;
  font-weight: 700;
  fill: #ffffff; /* White text on green bg */
  font-family: ui-monospace, monospace;
}

.member-row {
  transition: all 0.2s ease;
  border-radius: 16px;
  padding: 8px 12px;
}

.member-row.is-active {
  background: var(--green2); /* Solid green background */
  box-shadow: 0 4px 12px rgba(44, 208, 86, 0.25);
}

.member-row.is-active .h2 {
  color: #ffffff;
  font-weight: 700;
}

.member-row.is-active .avatar {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  box-shadow: none;
}