.shop-balance {
  font-size: 0.9rem;
  font-weight: 700;
  color: #e0a200;
  margin-left: 8px;
}

.shop-heading {
  font-weight: 700;
  margin: 14px 0 8px;
}

.butterfly-shop-daily {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(28, 126, 214, 0.12);
  border: 1px solid rgba(28, 126, 214, 0.35);
  margin-bottom: 12px;

  .daily-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
  }

  .daily-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    overflow: hidden;
  }

  .daily-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #4dabf7, #1c7ed6);
    border-radius: 999px;
    transition: width 0.3s ease;
  }

  .daily-status {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #495057;
    font-variant-numeric: tabular-nums;
  }
}

.butterfly-shop-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.butterfly-shop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, transform 0.08s ease;

  &:hover:not(:disabled) {
    background: #f1f3f5;
  }

  &:active:not(:disabled) {
    transform: scale(0.99);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .shop-item-label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 0.9rem;
  }

  .shop-item-lvl {
    display: inline;
    color: #1c7ed6;
    font-weight: 700;
  }

  .shop-item-desc {
    font-weight: 400;
    font-size: 0.74rem;
    color: #868e96;
  }

  .shop-item-cost {
    flex: 0 0 auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e0a200;
    white-space: nowrap;
  }
}